Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Jump links

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeSpaceInteraction statesStyleColor schemeSpaceInteraction states

Style

Jump links are a list of links located near content that act as persistent navigation. This list can be vertical or horizontal and a title is always included on top.

Anatomy

Anatomy of jump links with numbered annotations pointing to various parts
  1. Title
  2. Inactive section
  3. Active section border
  4. Active section
  5. Section with nested jump links

Color scheme

Vertical and horizontal jump links are available in both light and dark color schemes.

Light scheme

The light scheme disclosure includes a box shadow, but the dark scheme disclosure does not.

Learn more about the Disclosure element.

Four sets of jump links. Two vertical with one nested, one horizontal, and one vertical inside a disclosure.

Dark scheme

Four sets of jump links on a dark color scheme. Two vertical with one nested, one horizontal, and one vertical inside a disclosure.

Space

The space in between jump links and content should use the --rh-space-2xl token at a minimum.

Three sets of vertical jump links. Jump links have 16px of margin bottom between the accessible label and the list. Jump links have 16px of horizontal padding and 8px of vertical padding. Nested jump links have 32px of left padding from the border. There's also 32px of margin right between the jump links and the content. Horizontal jump links. 16px of padding around the jump links and 16px of top and bottom padding around the accessible label. Jump links in a disclosure. Jump links have 16px top margin from the disclosure's border when open. All other sides have 24px of padding from the disclosure's border.

Interaction states

Hover

The active section jump link is interactive, but the styling does not change on hover.

Hovered jump links have the border thickness increased and the text gets darker. Similar to the light scheme, hovered jump links have the border thickness increased and the text gets darker.
Property Light scheme Dark scheme
Thick border color --rh-color-gray-60 --rh-color-gray-30
Jump link text color --rh-color-text-primary --rh-color-text-primary
Disclosure trigger button surface color --rh-color-surface-lighter --rh-color-surface-dark

Focus and active

The active section jump link can receive focus, but the styling does not change.

Focused jump links receive a blue outline all the way around the link. Similar to the light scheme, dark focused jump links have a blue outline all the way around the link.
Property Light scheme Dark scheme
Thick border color --rh-color-gray-60 --rh-color-gray-30
Jump link text color --rh-color-text-primary --rh-color-text-primary
Disclosure trigger button surface color --rh-color-surface-lighter --rh-color-surface-dark
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify