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 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
OverviewUsage guidelinesUsage guidelinesAccessibilityStatusWhen to useStatus checklistOverviewUsage guidelinesUsage guidelinesAccessibilityStatusWhen to useStatus checklist

Overview

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.

import '@rhds/elements/rh-jump-links/rh-jump-links.js';
 
#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);
    }
  }
}
 
<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>
 
import { JumpLink } from "@rhds/elements/react/rh-jump-link/rh-jump-link.js";
import { JumpLinks } from "@rhds/elements/react/rh-jump-links/rh-jump-links.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="jump-links-demo-container">
    <aside>
      <h2 id="sections">Sections</h2>
      <JumpLinks aria-labelledby="sections">
        <JumpLink href="#section-1">Section 1</JumpLink>
        <JumpLink href="#section-2">Section 2</JumpLink>
        <JumpLink href="#section-3">Section 3</JumpLink>
        <JumpLink href="#section-4">Section 4</JumpLink>
        <JumpLink href="#section-5">Section 5</JumpLink>
      </JumpLinks>
    </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>
);

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

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
 View source on GitHub

Status

When to use

  • Act as persistent or sticky navigation for pages with lots of content
  • Navigate through section headings on a page without scrolling
  • Move a user to a specific section of content

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify