Adding Jump Links to Modules

Want to add a link that takes a user to a specific module on a page?

... like this one (to the FAQs)

SanityPress comes included with a Studio component and a frontend helper function to make this possible—and it's quite easy.

The Studio Component🔗

The Accordion list module has the code already added:

export default defineType({
	name: 'accordion-list',
	...
	fields: [
		...
		defineField({
			name: 'uid',
			title: 'Unique Identifier',
			type: 'uid',
			group: 'options',
		}),
	],
})

Which adds the following component:

Checkout the source code for this schema+input component; it's all in a single file for easy copy/paste.

The Frontend🔗

Then in your Next.js frontend component file, make the following additions to set the id attribute to then be able to use as jump links.

import uid from '@/lib/uid'

export default function AccordionList({ ...props }: Sanity.Module & Partial<{ ... }>) {
  return (
    <section
      id={uid(props)}
      className="..."
    >
      ...
    </section>
  )
}

Say, you set the uid value as my-jump-link. Now, your module can be linked directly like this:

<a href="#my-jump-link">Jump link</a>

<!-- if linking to another page -->
<a href="/another-page#my-jump-link">Jump link</a>