Jump links

Usage

Content

Jump links are used to help a user navigate through large sections of content. Blocks of content that use jump links should be displayed in full and not hidden in other components, unless absolutely necessary. Sections that contain additional content can include nested sections for better organization. Nested sections shouldn’t be visible under a parent section by default, they’re displayed when a user scrolls past them or if they select the specific parent section link.

Character count

The label and section links should have fewer characters. The recommended maximum character count for the elements of jump links are listed below and include spaces.

Element	Character count
Label	18
Section links	30

Positioning

Jump links are placed on the left edge of the grid on large screens so content can scroll freely on the right without interruption. Ensure there’s ample space between jump links and the content.

Best practices

Jump links should contain at least two section links.

Don’t include section links that are really long, they can be customized to be shorter when added to a group of jump links.

Don’t overload jump links with too many section links, but including lots of nested section links is acceptable.

Don’t nest section links within nested section links.

Behavior

Positioning

When a page loads, jump links are anchored to the top edge of content that it applies to before it becomes persistent.

Active section

When a page loads, jump links are anchored to the top edge of content that it applies to before it becomes persistent.

Selecting sections

When a user selects a section link, the content moves up or down and lands on the top edge of the section they chose. The red indicator bar highlights the active section link and the link changes color before the section comes into view.

Mobile

Jump links can be used on large and small screens. There’s not enough space to use jump links in a mobile layout, so it’s wrapped in a Disclosure and anchored above the content instead. It becomes persistent when a user scrolls past the top edge of the content.

Interaction states

Jump links have the same interaction states as vertical Open tabs.

Tab order

For accessibility, jump links are required to be focused. Any interactive elements above jump links will be focused first until jump links stick to the top edge of content. Once jump links come into view and are persistent, the first section link is focused and the tab order becomes top to bottom.