Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Jump links

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-jump-linksUsage guidelinesUsage guidelinesAccessibilityrh-jump-linkrh-jump-links-listImportingUsagerh-jump-linksUsage guidelinesUsage guidelinesAccessibilityrh-jump-linkrh-jump-links-list

Importing

Add rh-jump-links to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<div id="jump-links-demo-container">
  <aside>
    <h2 id="sections">Sections</h2>
    <rh-jump-links aria-labelledby="sections">
      <rh-jump-link href="#section-1">Section 1</rh-jump-link>
      <rh-jump-link href="#section-2">Section 2</rh-jump-link>
      <rh-jump-link href="#section-3">Section 3</rh-jump-link>
      <rh-jump-link href="#section-4">Section 4</rh-jump-link>
      <rh-jump-link href="#section-5">Section 5</rh-jump-link>
    </rh-jump-links>
  </aside>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit itaque veniam animi iure corporis quibusdam error, necessitatibus inventore fugiat, minus natus eaque provident eius facilis.
    Dolorem qui tenetur quaerat facere!</p>
</div>

<script type="module">
  import '@rhds/elements/rh-jump-links/rh-jump-links.js';
</script>

<style>
  #jump-links-demo-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--rh-space-2xl, 32px);

    aside {
      h2 {
        font-weight: var(--rh-font-weight-heading-medium);
        font-family: var(--rh-font-family-body-text);
        font-size: var(--rh-font-size-body-text-md);
        line-height: var(--rh-line-height-body-text, 1.5);
        margin-block-end: var(--rh-space-lg);
      }
    }
  }
</style>
Copy to Clipboard Wrap lines

Persistent in-page navigation for jumping to content sections. Renders a role="navigation" landmark with aria-label from accessible-label (required per WCAG 1.3.6 when multiple nav landmarks exist). Supports vertical and horizontal orientations with ScrollSpy auto-highlighting. Avoid nesting more than one level deep.

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slot Name Summary Description
[default]

navigation link items and nested lists (default slot)

Contains <rh-jump-link> elements and optional <rh-jump-links-list> groups. Each child receives role="listitem" within the role="list" container, forming an accessible navigation structure for screen readers. Link each item to a section ID (href="#id") corresponding to a heading or landmark on the page. Place links in page order so assistive technology users experience a logical sequence. Use nested lists sparingly to avoid overwhelming users.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attribute DOM Property Description Type Default
orientation orientation

Controls the layout direction of jump link items.

  • vertical (default) - Links are stacked vertically, typically displayed on the side of the page
  • horizontal - Links are arranged in a row, with overflow scroll controls when needed

Usage guidelines

  • Use vertical for sidebar navigation on desktop layouts
  • Use horizontal for mobile-friendly layouts or when space is limited
  • When horizontal, scroll buttons appear automatically to navigate overflowing links
  • The orientation cascades to child <rh-jump-link> and <rh-jump-links-list> elements
 
'horizontal' | 'vertical'
 
'vertical'
accessible-label accessibleLabel

Accessible name for the navigation landmark.

Provides an aria-label for the jump links navigation element, helping screen reader users identify and navigate to this section. This is especially important when multiple navigation landmarks exist on the page.

Usage guidelines

  • Use a descriptive label like "On this page" or "Page sections"
  • Ensure the label is unique if you have multiple <rh-jump-links> on the page
  • Keep labels concise and meaningful for screen reader users

Accessibility

  • Jump links use role="navigation" creating a navigation landmark
  • The accessible label helps distinguish this navigation from others on the page
  • Without an accessible label, screen readers will announce "navigation" without context
 
string
 
unknown
Method Name Description
firstUpdated()
orientationChanged()
Event Name Description
toggle

Fired when the expanded disclosure widget is toggled. Does not carry additional detail data.

None

None

Token Description Copy
--rh-length-4xs

Jump links border width

1px length token
--rh-space-3xl

Jump link horizontal margin

48px spacer
--rh-border-width-sm

Horizontal top border width

Horizontal bottom border width

1px border width; Example: Secondary CTA or Button
--rh-color-border-subtle

Jump links border color

Horizontal top border color

Horizontal bottom border color
--rh-space-lg

Jump link horizontal spacing

16px spacer
--rh-color-gray-40

Disabled scroll button text color in light mode

Subtle icon (hover state)
--rh-color-gray-50

Disabled scroll button text color in dark mode

Subtle icon
--rh-color-text-primary

Scroll button hover text color

An individual navigation link within <rh-jump-links> that scrolls the page to a target section. Renders as role="listitem" with an internal anchor. When active, sets aria-current="location" for screen readers. Tab moves focus to the link; Enter or click scrolls to the href target. Must be a child of <rh-jump-links> or <rh-jump-links-list>.

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slot Name Summary Description
[default]

link label text (default slot)

Text content for this jump link. Serves as the accessible name for the internal anchor element, so it should match or closely reflect the target section heading (per WCAG 2.4.6 Headings and Labels). Keep text concise.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attribute DOM Property Description Type Default
active active

Whether this link represents the currently visible section. When true, a bold border and aria-current="location" are applied. Defaults to false.

 
boolean
 
false
href href

The URL fragment (e.g. "#section-id") this link navigates to. Must match an element ID on the page. Defaults to undefined.

 
string
 
unknown

None

None

None

CSS Property Description Default
--rh-jump-link-max-width

Vertical link max width override

 calc(var(--rh-length-md, 8px) * 40)
Token Description Copy
--rh-color-interactive-secondary-default

Jump link text color
--rh-space-md

Jump link vertical spacing

8px spacer
--rh-length-md

8px length token
--rh-space-lg

Jump link vertical inline-end padding

Jump link inner spacing

16px spacer
--rh-color-interactive-primary-default

Focus ring color
--rh-border-radius-default

Jump link corner rounding

3px border radius; Example: Card
--rh-color-text-primary

Jump link hover text color

Jump link focus text color

Jump link active text color
--rh-color-brand-red

Jump link active border color
--rh-border-width-lg

Vertical active border width

Horizontal active border width

3px border width: Example: Expanded Accordion panel
--rh-color-border-status-neutral

Jump link hover/focus border color

Vertical active border color

Horizontal active border color

Provides a nested, expandable group for organizing related <rh-jump-link> elements within <rh-jump-links>. Put the link that labels this group in slot="parent". In vertical orientation, child links indent beneath the parent; in horizontal orientation the group is hidden. Sets aria-current="location" and role="listitem" on itself for screen readers. Avoid deeply nesting multiple levels.

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slot Name Summary Description
parent

parent link for this nested group (parent slot)

A single <rh-jump-link> that labels this group. When clicked, the nested list expands in vertical orientation. Screen readers announce it as a list item within the navigation landmark.
[default]

child jump links (default slot)

One or more <rh-jump-link> children that appear nested under the parent link. In vertical mode, these indent with additional padding. Hidden in horizontal orientation. Each child has role="listitem" for screen readers.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attribute DOM Property Description Type Default
active active

Whether any child link in this group is the active section. When true, the parent border highlights and child list expands (vertical only). Defaults to false.

 
boolean
 
false

None

None

None

None

Token Description Copy
--rh-length-4xs

List border width

1px length token
--rh-color-border-subtle

List border color
--rh-space-lg

Jump link end spacing

Nested link inline-start padding

16px spacer
--rh-length-xs

Vertical active indicator width

Horizontal active indicator width

4px length token
--rh-color-brand-red

Vertical active indicator color

Horizontal active indicator color
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify