Jump links
On this page
On this page
Overview
Jump links allow users to navigate sections of content on a page.
Edit element properties
import '@rhds/elements/rh-jump-links/rh-jump-links.js';#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);
}
}
}<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>Controls the layout direction of jump link items.
vertical(default) - Links are stacked vertically, typically displayed on the side of the pagehorizontal- Links are arranged in a row, with overflow scroll controls when needed
Usage guidelines
- Use
verticalfor sidebar navigation on desktop layouts - Use
horizontalfor 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
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
In Progress
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
Jump links sample element with "Jump to section" at the top and five links below. The links are "anchored" by a left vertical border. The third link is active and has a thicker red border on the left as an indicator.
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in RH Elements |
| RH Shared Libs |
|
Component is being developed for RH Shared Libs |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
