Navigation (vertical)
On this page
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 navigation list of top-level and grouped navigation items, typically used in a side navigation pattern.
| Slot Name | Summary | Description |
|---|---|---|
|
Use this slot for |
| 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. |
|
|
| Token | Summary | Copy |
|---|---|---|
--rh-color-surface-lightest
|
|
|
--rh-color-surface-darker
|
|
|
--rh-space-xs
|
|
|
--rh-line-height-body-text
|
|
|
--rh-space-md
|
|
|
--rh-space-lg
|
|
|
--rh-font-size-body-text-md
|
|
|
--rh-color-text-primary
|
|
|
--rh-color-border-subtle
|
|
|
--rh-color-surface-lighter
|
|
|
--rh-color-surface-dark
|
|
|
--rh-border-width-lg
|
|
|
--rh-color-brand-red
|
|
rh-navigation-vertical-list
A disclosure menu of grouped navigation items in a vertical navigation list.
| Slot Name | Summary | Description |
|---|---|---|
|
A summary slot for the group title, overrides the summary attribute |
||
|
Use this slot for |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
open |
Optional open attribute that, sets the open state of the group. Defaults to false. |
|
|
|
|
highlight |
Bolds the first |
|
|
| Token | Summary | Copy |
|---|---|---|
--rh-font-family-body-text
|
|
|
--rh-font-size-body-text-md
|
|
|
--rh-font-weight-body-text-regular
|
|
|
--rh-space-xs
|
|
|
--rh-space-md
|
|
|
--rh-space-lg
|
|
|
--rh-font-size-body-text-sm
|
|
|
--rh-color-text-primary
|
|
|
--rh-color-border-subtle
|
|
|
--rh-color-surface-lighter
|
|
|
--rh-color-surface-dark
|
|
|
--rh-border-width-md
|
|
|
--rh-color-brand-red
|
|
|
--rh-font-weight-body-text-medium
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
