Skip to content

Adding Jump Links to Modules

  • #Tips & Tricks
  • #Modules
Read time: 4 minutes
1980s action movie film still of realistic Goku training by carrying a metal massive ship anchor in a dojo with the text "Jump Link Dojo"

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:

πŸ“ sanity/schemas/modules/accordion-list.ts
export default defineType({
	name: 'accordion-list',
	...
	fields: [
		...
		defineField({
			name: 'uid',
			title: 'Unique Identifier',
			type: 'uid',
			group: 'options',
		}),
	],
})

Which adds the following component:

Unique Identifier Studio input component
Leave blank to default to the module's `_key` value, or type one to override it

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.

πŸ“ src/ui/modules/AccordionList.tsx
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>
a massive ship anchor falling onto a city bus with the text "Modules" in New York, 1980s