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 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 Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall 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: max-content auto;
    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

Jump links allow users to navigate sections of content on a page.

Slots 1
Slot Name Summary Description
[default]

navigation link items and nested lists (default slot)

Contains <rh-jump-link> elements that navigate to sections on the page, and optional <rh-jump-links-list> elements to create nested navigation hierarchies.

Common patterns:

  • Individual <rh-jump-link> elements for flat navigation
  • <rh-jump-links-list> to group related links with expandable sections
  • Mix of both for multi-level page navigation

Best practices:

  • Link to sections with IDs (href="#section-id")
  • Place links in the order they appear on the page for intuitive navigation
  • Use nested lists sparingly to avoid overwhelming users with options
  • Each link should correspond to a heading or landmark on the page

@see Jump links documentation @see Guidelines for usage patterns
Note: [default] unnamed slots do not have a slot="name" attribute.
Attributes 2
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
Methods 2
Method Name Description
firstUpdated()
orientationChanged()
Events 1
Event Name Description
toggle

when the expanded disclosure widget is toggled
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 8
Token Summary Copy
--rh-length-4xs
--rh-space-3xl
--rh-border-width-sm
--rh-color-border-subtle
--rh-space-lg
--rh-color-gray-40
--rh-color-gray-50
--rh-color-text-primary
Slots 1
Slot Name Summary Description
[default]

undefined
Note: [default] unnamed slots do not have a slot="name" attribute.
Attributes 2
Attribute DOM Property Description Type Default
active active

Whether this item is active.

 
boolean
 
false
href href

hypertext reference for this link

 
string
 
unknown
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 1
CSS Property Description Default
--rh-jump-link-max-width

max-width for each vertical jump link

 calc(var(--rh-length-md, 8px) * 40)
Design Tokens 10
Token Summary Copy
--rh-color-interactive-secondary-default
--rh-space-md
--rh-length-md
--rh-space-lg
--rh-color-interactive-primary-default
--rh-border-radius-default
--rh-color-text-primary
--rh-color-brand-red
--rh-border-width-lg
--rh-color-border-status-neutral
Slots 2
Slot Name Summary Description
parent
[default]

undefined
Note: [default] unnamed slots do not have a slot="name" attribute.
Attributes 1
Attribute DOM Property Description Type Default
active active

Whether this item is active.

 
boolean
 
false
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 5
Token Summary Copy
--rh-length-4xs
--rh-color-border-subtle
--rh-space-lg
--rh-length-xs
--rh-color-brand-red
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify