Navigation (vertical)
On this page
Importing
Add rh-navigation-vertical to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS
This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
<link rel="stylesheet" href="/path/to/rh-navigation-vertical/rh-navigation-vertical-lightdom.css">Usage
<rh-navigation-vertical>
<rh-navigation-link href="#" current-page="">Home</rh-navigation-link>
<rh-navigation-vertical-list summary="About">
<rh-navigation-link href="#about">About the Design System</rh-navigation-link>
<rh-navigation-link href="#about/roadmap">Roadmap</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Get Started">
<rh-navigation-link href="#get-started">About the Design System</rh-navigation-link>
<rh-navigation-link href="#get-started/designers">Designers</rh-navigation-link>
<rh-navigation-link href="#get-started/developers">Developers</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Foundations">
<rh-navigation-link href="#foundations">Overview</rh-navigation-link>
<rh-navigation-link href="#foundations/color">Color</rh-navigation-link>
<rh-navigation-link href="#foundations/grid">Grid</rh-navigation-link>
<rh-navigation-link href="#foundations/iconography">Iconography</rh-navigation-link>
<rh-navigation-link href="#foundations/interactions">Interactions</rh-navigation-link>
<rh-navigation-link href="#foundations/spacing">Spacing</rh-navigation-link>
<rh-navigation-link href="#foundations/typography">Typography</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Tokens">
<rh-navigation-link href="#tokens">Overview</rh-navigation-link>
<rh-navigation-link href="#tokens/color">Global Color</rh-navigation-link>
<rh-navigation-link href="#tokens/box-shadow">Box Shadow</rh-navigation-link>
<rh-navigation-link href="#tokens/typography">Typography</rh-navigation-link>
<rh-navigation-link href="#tokens/border">Border</rh-navigation-link>
<rh-navigation-link href="#tokens/opacity">Opacity</rh-navigation-link>
<rh-navigation-link href="#tokens/space">Space</rh-navigation-link>
<rh-navigation-link href="#tokens/length">Length</rh-navigation-link>
<rh-navigation-link href="#tokens/icon">Icon</rh-navigation-link>
<rh-navigation-link href="#tokens/breakpoints">Breakpoints</rh-navigation-link>
<rh-navigation-link href="#tokens/media-queries">Media Queries</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Elements">
<rh-navigation-link href="#all-elements">All Elements</rh-navigation-link>
<rh-navigation-link href="#elements/accordion">Accordion</rh-navigation-link>
<rh-navigation-link href="#elements/alert">Alert</rh-navigation-link>
<rh-navigation-link href="#elements/announcement">Announcement</rh-navigation-link>
<rh-navigation-link href="#elements/audio-player">Audio Player</rh-navigation-link>
<rh-navigation-link href="#elements/avatar">Avatar</rh-navigation-link>
<rh-navigation-link href="#elements/back-to-top">Back to Top</rh-navigation-link>
<rh-navigation-link href="#elements/badge">Badge</rh-navigation-link>
<rh-navigation-link href="#elements/breadcrumb">Breadcrumb</rh-navigation-link>
<rh-navigation-link href="#elements/button">Button</rh-navigation-link>
<rh-navigation-link href="#elements/card">Card</rh-navigation-link>
<rh-navigation-link href="#elements/chip">Chip</rh-navigation-link>
<rh-navigation-link href="#elements/code-block">Code Block</rh-navigation-link>
<rh-navigation-link href="#elements/call-to-action">Call to Action</rh-navigation-link>
<rh-navigation-link href="#elements/dialog">Dialog</rh-navigation-link>
<rh-navigation-link href="#elements/disclosure">Disclosure</rh-navigation-link>
<rh-navigation-link href="#elements/footer">Footer</rh-navigation-link>
<rh-navigation-link href="#elements/health-index">Health Index</rh-navigation-link>
<rh-navigation-link href="#elements/icon">Icon</rh-navigation-link>
<rh-navigation-link href="#elements/jump-links">Jump Links</rh-navigation-link>
<rh-navigation-link href="#elements/navigation-primary">Navigation Primary</rh-navigation-link>
<rh-navigation-link href="#elements/navigation-secondary">Navigation Secondary</rh-navigation-link>
<rh-navigation-link href="#elements/navigation-vertical">Navigation Vertical</rh-navigation-link>
<rh-navigation-link href="#elements/pagination">Pagination</rh-navigation-link>
<rh-navigation-link href="#elements/progress-indicator">Progress Indicator</rh-navigation-link>
<rh-navigation-link href="#elements/popover">Popover</rh-navigation-link>
<rh-navigation-link href="#elements/progress-steps">Progress Steps</rh-navigation-link>
<rh-navigation-link href="#elements/site-status">Site Status</rh-navigation-link>
<rh-navigation-link href="#elements/skip-link">Skip Link</rh-navigation-link>
<rh-navigation-link href="#elements/spinner">Spinner</rh-navigation-link>
<rh-navigation-link href="#elements/statistic">Statistic</rh-navigation-link>
<rh-navigation-link href="#elements/subnavigation">Subnavigation</rh-navigation-link>
<rh-navigation-link href="#elements/surface">Surface</rh-navigation-link>
<rh-navigation-link href="#elements/switch">Switch</rh-navigation-link>
<rh-navigation-link href="#elements/table">Table</rh-navigation-link>
<rh-navigation-link href="#elements/tabs">Tabs</rh-navigation-link>
<rh-navigation-link href="#elements/tag">Tag</rh-navigation-link>
<rh-navigation-link href="#elements/tile">Tile</rh-navigation-link>
<rh-navigation-link href="#elements/timestamp">Timestamp</rh-navigation-link>
<rh-navigation-link href="#elements/tooltip">Tooltip</rh-navigation-link>
<rh-navigation-link href="#elements/video-embed">Video Embed</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Theming">
<rh-navigation-link href="#theming/overview">Overview</rh-navigation-link>
<rh-navigation-link href="#theming/color-palettes">Color Palettes</rh-navigation-link>
<rh-navigation-link href="#theming/customizing">Customizing</rh-navigation-link>
<rh-navigation-link href="#theming/developers">Developers</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Patterns">
<rh-navigation-link href="#patterns/all-patterns">All Patterns</rh-navigation-link>
<rh-navigation-link href="#patterns/card">Card</rh-navigation-link>
<rh-navigation-link href="#patterns/tabs">Tabs</rh-navigation-link>
<rh-navigation-link href="#patterns/filter">Filter</rh-navigation-link>
<rh-navigation-link href="#patterns/form">Form</rh-navigation-link>
<rh-navigation-link href="#patterns/link-with-icon">Link with Icon</rh-navigation-link>
<rh-navigation-link href="#patterns/search-bar">Search Bar</rh-navigation-link>
<rh-navigation-link href="#patterns/sticky-banner">Sticky Banner</rh-navigation-link>
<rh-navigation-link href="#patterns/sticky-card">Sticky Card</rh-navigation-link>
<rh-navigation-link href="#patterns/tile">Tile</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Personalization">
<rh-navigation-link href="#personalization/all-personalization-patterns">All Personalization Patterns</rh-navigation-link>
<rh-navigation-link href="#personalization/announcement">Announcement</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-vertical-list summary="Accessibility">
<rh-navigation-link href="#accessibility/fundamentals">Fundamentals</rh-navigation-link>
<rh-navigation-link href="#accessibility/accessibility-tools">Accessibility Tools</rh-navigation-link>
<rh-navigation-link href="#accessibility/assistive-technologies">Assistive Technologies</rh-navigation-link>
<rh-navigation-link href="#accessibility/ci-cd">CI/CD</rh-navigation-link>
<rh-navigation-link href="#accessibility/content">Content</rh-navigation-link>
<rh-navigation-link href="#accessibility/contributors">Contributors</rh-navigation-link>
<rh-navigation-link href="#accessibility/design">Design</rh-navigation-link>
<rh-navigation-link href="#accessibility/development">Development</rh-navigation-link>
<rh-navigation-link href="#accessibility/manual-testing">Manual Testing</rh-navigation-link>
<rh-navigation-link href="#accessibility/resources">Resources</rh-navigation-link>
<rh-navigation-link href="#accessibility/screen-readers">Screen Readers</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-link href="#design-code-status">Design & Code Status</rh-navigation-link>
<rh-navigation-link href="#release-notes">Release Notes</rh-navigation-link>
<rh-navigation-link href="#get-support">Get Support</rh-navigation-link>
</rh-navigation-vertical>
<link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css">
<script type="module">
import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
</script>rh-navigation-vertical
A vertical sidebar navigation for organizing site structure. Authors
must set accessible-label when multiple navigation landmarks exist.
Uses a navigation ARIA role with a visually hidden heading for
screen readers. Keyboard users tab through links and groups.
Slots
| Slot Name | Summary | Description |
|---|---|---|
Navigation items |
Place |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
accessibleLabel |
The accessible-label attribute labels the navigation using a visually hidden heading. Defaults to 'Navigation'. This label should be changed if other navigation elements are present or when translations are needed. |
|
|
Methods
None
Events
None
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-color-surface-lightest
|
Primary surface (light theme) |
|
--rh-color-surface-darker
|
Secondary surface (dark theme) |
|
--rh-space-xs
|
Spacing between navigation items 4px spacer |
|
--rh-line-height-body-text
|
Navigation label line height Line height for body text |
|
--rh-space-md
|
8px spacer |
|
--rh-space-lg
|
16px spacer |
|
--rh-font-size-body-text-md
|
Top-level link font size 16px font size |
|
--rh-color-text-primary
|
Link text color, inherits from theme |
|
--rh-color-border-subtle
|
Hover indicator uses subtle border |
|
--rh-color-surface-lighter
|
Tertiary surface (light theme) |
|
--rh-color-surface-dark
|
Tertiary surface (dark theme) |
|
--rh-border-width-lg
|
Hover indicator border width Active indicator border width Current page indicator border width 3px border width: Example: Expanded Accordion panel |
|
--rh-color-brand-red
|
Active indicator uses brand accent Current page indicator uses brand accent |
|
rh-navigation-vertical-list
A collapsible group for organizing related links within an
<rh-navigation-vertical> element. Allows users to expand and
collapse sections. Authors should set summary to provide a
label. Pressing Escape closes the group and returns focus to the
summary. Uses an ARIA listitem role for screen readers.
Slots
| Slot Name | Summary | Description |
|---|---|---|
Group heading label |
Accepts inline text or a |
|
Navigation group items |
Place |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
open |
Optional open attribute that sets the open state of the group. Defaults to false. |
|
|
|
|
summary |
Optional summary attribute, sets the summary text. Overridden by the summary slot. |
|
|
|
|
highlight |
Bolds the first |
|
|
Methods
None
Events
| Event Name | Description |
|---|---|
|
|
Fires when the group opens or closes. The
event has no detail; check the |
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-font-family-body-text
|
Summary label typeface Body text font family |
|
--rh-font-size-body-text-md
|
Summary label font size 16px font size |
|
--rh-font-weight-body-text-regular
|
Summary label font weight Regular font weight |
|
--rh-space-xs
|
Spacing between nested navigation items Nested list block spacing 4px spacer |
|
--rh-space-md
|
8px spacer |
|
--rh-space-lg
|
Spacing between summary text and caret icon Nested list inline indentation 16px spacer |
|
--rh-font-size-body-text-sm
|
Nested group uses smaller font size Nested link font size 14px font size |
|
--rh-color-text-primary
|
Nested link text color, inherits from theme Nested link text color on hover, inherits from theme |
|
--rh-color-border-subtle
|
Nested hover indicator uses subtle border |
|
--rh-color-surface-lighter
|
Tertiary surface (light theme) |
|
--rh-color-surface-dark
|
Tertiary surface (dark theme) |
|
--rh-border-width-md
|
Nested hover indicator border width Active indicator border width 2px border width: Example: Alert |
|
--rh-color-brand-red
|
Active indicator uses brand accent Current page indicator uses brand accent |
|
--rh-font-weight-body-text-medium
|
Highlighted first link uses medium weight Medium font weight |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
