In-page Anchors

Of course, I’ll try to explain a bit more.

So in a RichText, using the “hyperlink” button, I would like to :

  • link to a Document (that means an internal content, with all the usual logic from Prismic)
  • add an hash to that link object (so I can use that value in my HTML), it could be a simple optional text input

This is not an attempt to create a “one page navigation through anchor menu” or a “table of contents”.

Just the way any website make a reference to a certain part of a web page, for both UX and A11Y concerns.

As an example, the documentation of Prismic includes anchors to specific sections :

Adding #search-and-browse-your-media at the end of the url allows you to jump to the corresponding H2 on page load.

That’s pretty basic html5 stuff here, nothing fancy.

5 Likes

Hello Prismic Team,

Could we have an update on that ticket ?

Do you need more infos or you get the point ?

Thanks

Hey,

Sorry about the delay. :disappointed_relieved: This slipped through the cracks, forum teething issues. :upside_down_face:

Unfortunately this isn’t possible at the moment, though I agree that this would be really useful. I’m tagging the @features-team so they can consider this is future product improvements.

Although I don’t believe the team has the bandwidth to implement this for the foreseeable future. If / When we have any updates on this we will update you here.

Thanks.

Sidenote: For anyone searching for the ‘table of contents’ use case, we’ve posted a solution here:

Hi,

I outlined a few possible strategies on how to model links in Modeling buttons/links

I have this exact problem of having links in a paragraph that lneed to lead to specific parts of another document. The paragraph is a RichText, and after trying a few things I used a link to a “link” document instead of linking directly to the target document.
My link document looks like this:

{
  "Main": {
    "id": {
      "type": "Text",
      "config": {
        "label": "id",
        "placeholder": "Prismic id"
      }
    },
    "text": {
      "type": "Text",
      "config": {
        "label": "text"
      }
    },
    "href": {
      "type": "Text",
      "config": {
        "label": "href"
      }
    },
    "anchor": {
      "type": "Text",
      "config": {
        "label": "anchor"
      }
    },
    "alt_link": {
      "type": "Link",
      "config": {
        "label": "alt_link"
      }
    },
    "appearance": {
      "type": "Select",
      "config": {
        "options": [
          "link",
          "button"
        ],
        "default_value": "link",
        "label": "appearance"
      }
    }
  }
}

On the templating side, I systematically prefetch all the fields of link documents using fetchLinks and in the link resolver when I resolve a link to a document of type link I use more logic to resolve the actual href (either based on the href field or on the content of the alt_link field, combined with the anchor field to create the final link)
This works but requires editors to manually create the necessary link documents when simple links are not enough

The reason for the href is to be able to easily build relative links to routes which are not yet declared in prismic (app entry points mostly for which we don’t have documents yet because work in progress).

I would really like to have an anchor option, ideally editors would be able to select the title from the target document they want to point to.

2 Likes

Hey guys,

we also see the extreme need to have more linking options. Therefore I would also suggest to add an option for “Open in new Tab” for normal documents.

Two ways to get around this:

  1. Use normal links and you can use anchors and open in new tab (stupid if document urls change…)
  2. Use Google Optimize :wink:

Onpage Navigation
For onpage navigation we use two slices. One slice with anchor information and one slice to define the navigation positon and theme. With these information you can build a pretty good onpage navigation.

1 Like

Hello,
Is adding in-page anchors going to be possible? We really need it for our marketing team, so that they can easily add tables of contents, document navigation etc in their blogposts. It would be much appreciated, especially as I see more than 1 year ago this topic was already discussed and actually this is a big disadvantage of using Prismic for us.
Regards

@kris @Michal
The team isn't working on this at the moment as this will most likely be rolled into the larger revamp of the rich text editor project. We are working hard at the minute to make it easier for our develops to push updates to the document writing room which should help this project.

If/when this changes we'll update you here.

The only thing I can recommend for a table of contents is the solution suggested above, this is what we do on our documentation website:

Thank you for the response.

1 Like

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.