Skip to main content Red Hat Design System logo Contribute on Github

Jump links

Overview Style Guidelines

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.

Jump links specs

Theme

Jump links theme light Jump links theme dark

Label

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

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

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.

Jump links nested section

Active indicator bar

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

Jump links active indicator bar

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.

Desktop

Jump links on desktop
On large screens, jump links are displayed in the layout

Tablet

Jump links on tablet
Section links reduce in width as breakpoints get smaller

Mobile

Jump links on mobile
On small screens, jump links are wrapped in a collapsed disclosure

Spacing

Jump links spacing on desktop Jump links spacing on mobile
Example Token Description
6 --rh-space-sm 6px spacer
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer

© 2021-2024 Red Hat, Inc. Deploys by Netlify