Jump links
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>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-lg);
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>rh-jump-links
Jump links act as persistent navigation that consists of a vertical list of anchor links. Selecting a link moves a user to content that corresponds with the link selected. A link is displayed as active when the content it links to is visible in the browser window. .
| Slot Name | Description |
|---|---|
|
Place |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
orientation |
orientation |
Whether the layout of children is vertical or horizontal. |
|
|
accessible-label |
accessibleLabel |
Accessible label for nav |
|
|
| Method Name | Description |
|---|---|
orientationChanged() |
| Event Name | Description |
|---|---|
toggle |
when the |
| Token | Copy |
|---|---|
--rh-border-width-sm
|
|
--rh-color-border-subtle
|
|
--rh-color-gray-40
|
|
--rh-color-gray-50
|
|
--rh-color-text-primary
|
|
--rh-length-4xs
|
|
--rh-space-3xl
|
|
--rh-space-lg
|
|
rh-jump-link
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
active |
active |
Whether this item is active. |
|
|
href |
href |
hypertext reference for this link |
|
|
| Event Name | Description |
|---|---|
select |
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-color-border-status-neutral
|
|
--rh-color-brand-red
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-secondary-default
|
|
--rh-color-interactive-secondary-focus
|
|
--rh-color-interactive-secondary-hover
|
|
--rh-color-text-primary
|
|
--rh-length-xs
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
rh-jump-links-list
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
active |
active |
Whether this item is active. |
|
|
| Token | Copy |
|---|---|
--rh-color-border-subtle
|
|
--rh-color-brand-red
|
|
--rh-length-4xs
|
|
--rh-length-xs
|
|
--rh-space-lg
|
|
