In-page navigation (jump List)

The in-page navigation allows a read to jump to specific sections on a lengthy page of content.
Status:
In use

In-page navigation helps users understand the contents of a page and navigate to the section they need to read. This component is most suited for lengthy pages of task-based content. The component is displayed above the main content.

Examples and code

Example

 

 

Code

<div class="anchor-nav">
    <ul>
        <li><a href="#help">General help</a></li>
        <li><a href="#specialty">Specialty consultation</a></li>
        <li><a href="#services">Services by visitor type</a></li>
        <li><a href="#forms">Library forms</a></li>
    </ul>
</div>

 

When to use

  • Long pages. In-page navigation can offer a substantial improvement to user experience for pages that include five or more distinct content sections.
  • Task-based sections. In-page anchors are best for jumping to discrete pieces of information, such as in an FAQ. They're less suited for something like a step-by-step process, where a reader needs to read the page in order.

When to consider something else 

  • Short pages. For pages that require little or no scrolling, in-page navigation is not necessary.
  • Unstructured content. Pages that lack heading-based hierarchical structures have nothing to anchor the in-page links.
  • Infinite scrolling. For pages that feature infinite scrolling, in-page navigation is neither a practical nor feasible feature.

Usability guidance

  • Display the in-page navigation at the top of the main content. 
  • Make it stand out. Site visitors should be able to quickly and easily distinguish in-page navigation from other landmarks on the page. 
  • Use language that matches section headings. The text of the links displayed within the in-page navigation aside should match the heading text of the target sections. 
  • Don’t include the page h1 in the navigation. Each page should have a single h1 to describe its contents. It would be redundant to include this heading level in the in-page navigation.
  • No in-page navigation heading needed. User testing has indicated that visitors intuit this kind of in-page function, as it's currently used. 

Accessibility guidance 

  • Allow keyboard navigation. Users should be able to navigate between items by using the Tab key. They should also be able to activate a link when pressing Enter on their keyboard. Users should be able to activate hover and focus states with both a mouse and a keyboard.
  • Keyboard users should access the in-page navigation before the main content. When a user tabs through a page that contains the in-page navigation component, they should find the in-page navigation before the main content. 
  • Set focus state on section target for keyboard users. When keyboard users follow an in-page anchor link set the focus state to the link target when the user presses the Enter key. When mouse users follow an in-page anchor link the focus should remain on the selected link.

 

Components

Utilities