Link to a specific slice on the same page

Prismic Administrative Support Features
1

It would be fantastic if I could specify the ability to link a slice within the same page. As a developer I'd love to be able to add an #id into the link address, but this is not a great experience for content editors.

I've got two concrete use cases for this.

  1. I am building landing pages that contain forms, those forms are rendered in a slice further down the page. I have a call to action at the top of the page and I would like to jump to the form when that call to action is clicked.

  2. I'm building documentation and the user may want to link to that specific section in a page. Much like linking to replies in the Prismic community.

If there is a way to achieve this already, I would love to find out about it.

2

Hey Ben, thanks for reaching out!

it is true that it can be useful to have such functionality built-in the Slices, what I'll do is mark this thread as an open feature request.

A workaround I can recommend would be to add a Key text field in your Slices to set an "ID" for each one. Then you can retrieve that value and assign it as the anchor href of the corresponding paragraph, and so create an anchor.

You could also set a label for the whole slice (read the section "Labels configuration"). The only difference with this approach will be that the label will be defined at the custom type level and won't be editable by your content authors.

4

This is being tracked as an open feature request.

If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the :heart: button to show your support for the feature and check out our Feature Request Guidelines.

6

Hi
Interesting feature, I found myself today in need of it.
In addition to what @benembery said, also it will be good if the slice itself contains info about the parent custom type once fetched

9

Here is generic workaround to implement links to the same page that might be helpful.

Using Headers (workaround allows to link to headers)

Using Primsic Html serializer, you can generate an id for Heading elements and (H1, H2, H3,…) based on heading content.

Once that is done, add a link to the generated anchor links from the Structure text you want to link from.

10

Hello, Fares
I was curious about this solution since I'm struggling to add links to each slice in my main page and add those links to my header elements
I just want to know how am I supposed to add the id in my slice and link that to the header component that is in another file,I'm using the new version of nextjs as a base of my project