Jump links

Style

Jump links are fixed on the page and follow a user as they scroll. It moves them to a section of content when the corresponding link is selected. It looks visually similar to Open tabs, the only difference is the uppercase label on top.

Theme

Label

Jump links display a label at the top indicating there are section links that a user can select. This label isn’t interactive.

Section links

Jump links feature links that float to the right of an anchor line, they represent the different sections that are available to select.

Nested section links

Sections that contain lots of content can be broken into nested sections for better organization and hierarchy. Nested section links are positioned under their parent section link and indented slightly. There are guidelines about how many section links can be included, but no guidelines about how many nested section links can be included.

Active indicator bar

A red indicator bar highlights what the active section is. It’s positioned on top of the anchor line, not adjacent.

Responsive design

Jump links can be used on all screen sizes.

Breakpoints

Jump links are displayed in layout on large screens, but on small screens it’s wrapped in a disclosure which is collapsed until a user expands the panel.