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>

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

rh-jump-links

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

Slots 1

Slot Name	Summary	Description
		Place <rh-jump-link> or <rh-jump-links-list> elements here

Attributes 2

Attribute	DOM Property	Description	Type	Default
orientation	orientation	Whether the layout of children is vertical or horizontal.	'horizontal' | 'vertical'	'vertical'
accessible-label	accessibleLabel	Accessible label for nav	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	Copy
--rh-length-4xs	Full CSS Variable Permalink to this token
--rh-space-3xl	Full CSS Variable Permalink to this token
--rh-border-width-sm	Full CSS Variable Permalink to this token
--rh-color-border-subtle	Full CSS Variable Permalink to this token
--rh-space-lg	Full CSS Variable Permalink to this token
--rh-color-gray-40	Full CSS Variable Permalink to this token
--rh-color-gray-50	Full CSS Variable Permalink to this token
--rh-color-text-primary	Full CSS Variable Permalink to this token

rh-jump-link

Slots 1

Slot Name	Summary	Description

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	Copy
--rh-color-interactive-secondary-default	Full CSS Variable Permalink to this token
--rh-space-md	Full CSS Variable Permalink to this token
--rh-length-md	Full CSS Variable Permalink to this token
--rh-space-lg	Full CSS Variable Permalink to this token
--rh-color-interactive-primary-default	Full CSS Variable Permalink to this token
--rh-border-radius-default	Full CSS Variable Permalink to this token
--rh-color-text-primary	Full CSS Variable Permalink to this token
--rh-color-brand-red	Full CSS Variable Permalink to this token
--rh-border-width-lg	Full CSS Variable Permalink to this token
--rh-color-border-status-neutral	Full CSS Variable Permalink to this token

rh-jump-links-list

Slots 2

Slot Name	Summary	Description
parent

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	Copy
--rh-length-4xs	Full CSS Variable Permalink to this token
--rh-color-border-subtle	Full CSS Variable Permalink to this token
--rh-space-lg	Full CSS Variable Permalink to this token
--rh-length-xs	Full CSS Variable Permalink to this token
--rh-color-brand-red	Full CSS Variable Permalink to this token

Related elements or patterns

• Disclosure
• Pagination
• Tabs