Adding Jump Links to Modules

  • #Tips & Tricks
  • #Modules
Read time: 1 minute
Mitchell Christ
Mitchell Christ
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 moduleProps from '@/lib/moduleProps'

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

This will add the following HTML attributes that you can use as reference for jump links or with CSS.

<section id="my-jump-link" data-module="accordion-list">
  ...
</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