2

I want to be able to refer to the UI pattern where each heading / h-tag on the page is automatically turned into an appropriately named link, and hovering on the heading reveals an icon that can be used to copy it, like this:

example of a permalink appearing next to the heading on mouse hover, taken from example 2 below

I find this pattern helpful, since it provides me with a way to link to a specific part of a long page in a standard way without cluttering up the UI or needing to navigate to another part of the page. Unfortunately, I also find this UI pattern to be difficult to refer to or to search for, even though it's widely used:

  1. Google developer style guide - heading targets (notice how if you hover over headings, you get the link)
  2. Github automatically reveals heading permalinks on hover in readme markdown docs, example.
  3. There are many libraries that turn headings into anchors automatically. For example, see AnchorJS library or Gatsby Smooth Scroll Anchor Links.
  4. Another example - bootstrap docs - if you hover a heading, you get a # sign that can copy a hyperlink to that heading.
  5. Another example - google's material design - this illustrates a related pattern - side table of contents navigation that changes as you scroll in the page

I did find Use of Mouse-Over Paragraph Marker in Headlines for Permalink, but that post is specifically scoped to paragraph marker headings.

If you were to refer to this UI pattern, what would you call it and where would you send someone to learn more about this UI pattern on the web (and its associated patterns, such as updating the ToC on scroll)?

1 Answer 1

0

They are called as "Jump Link"

You can read in details from the links below:

https://www.nngroup.com/articles/in-page-links/

https://www.w3.org/TR/html401/struct/links.html

1
  • I think that in the nngroup article, "jump links" refers to the process of turning headings into links that are then used in a table of contents, which is similar to the UI pattern I described, though not the same: the hover revealing link pattern isn't always associated with a ToC (though it often is, and probably should be). The "Jump Links" terminology is definitely still relevant - thanks for pointing it out.
    – Myer
    Dec 1, 2021 at 2:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.