Jump links

1. Label (optional): A descriptive header for a list of jump links.

2. Active section: The current section of the page the user is on.

3. Inactive section: The other sections of the page that the user is not currently on. Clicking on an inactive section will bring the user to the selected section and make the section active.

Jump links provide a way to navigate through section headings on a page without scrolling. The highlighted active section changes as the user scrolls to the next section.

On smaller screen sizes, use expandable jump links. This collapses a list of jump links into one component, which can be expanded to display the list of jump links.

Jump links can be displayed either horizontally or vertically. They can include optional subsections.

As the user scrolls down the page, the active sections are highlighted from top to bottom. This is the recommended variation.

As the user scrolls down the page, the active sections are highlighted from left to right. A jump link can be displayed left-aligned or center-aligned, and can display an optional label.

If the page has subsections, they are shown as indented jump links under the parent section. Subsections can be individually selected.

Expandable jump links hide the list of links within a collapsed section by default. Once users expand the section, they will see the full list of links, which they can then interact with.

Vertical jump links can be placed either to the left or the right of the content on the page. In both placements, the visual system is identical, including jump links with subsections.

We recommended placing jump links on the left side of the content and remaining consistent with the application you are working on. Only use jump links on the right when space allows and when there is an extensive nav on the left; otherwise, consider reverting to the left of the page.

For information regarding accessibility, visit the jump links accessibility tab.