Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Navigation (vertical)

OverviewStyleGuidelinesCodeDemos
Navigation (vertical)Color ContextContainedNestedOpenSlotted Anchor LinksSlotted IconsNavigation (vertical)Color ContextContainedNestedOpenSlotted Anchor LinksSlotted Icons

Navigation (vertical) 

import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
 
<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 &amp; 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">
 
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { NavigationVertical } from "@rhds/elements/react/rh-navigation-vertical/rh-navigation-vertical.js";
import { NavigationVerticalList } from "@rhds/elements/react/rh-navigation-vertical-list/rh-navigation-vertical-list.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <NavigationVertical>
    <NavigationLink href="#" current-page>Home</NavigationLink>
    <NavigationVerticalList summary="About">
      <NavigationLink href="#about">About the Design System</NavigationLink>
      <NavigationLink href="#about/roadmap">Roadmap</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Get Started">
      <NavigationLink href="#get-started">About the Design System</NavigationLink>
      <NavigationLink href="#get-started/designers">Designers</NavigationLink>
      <NavigationLink href="#get-started/developers">Developers</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Foundations">
      <NavigationLink href="#foundations">Overview</NavigationLink>
      <NavigationLink href="#foundations/color">Color</NavigationLink>
      <NavigationLink href="#foundations/grid">Grid</NavigationLink>
      <NavigationLink href="#foundations/iconography">Iconography</NavigationLink>
      <NavigationLink href="#foundations/interactions">Interactions</NavigationLink>
      <NavigationLink href="#foundations/spacing">Spacing</NavigationLink>
      <NavigationLink href="#foundations/typography">Typography</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Tokens">
      <NavigationLink href="#tokens">Overview</NavigationLink>
      <NavigationLink href="#tokens/color">Global Color</NavigationLink>
      <NavigationLink href="#tokens/box-shadow">Box Shadow</NavigationLink>
      <NavigationLink href="#tokens/typography">Typography</NavigationLink>
      <NavigationLink href="#tokens/border">Border</NavigationLink>
      <NavigationLink href="#tokens/opacity">Opacity</NavigationLink>
      <NavigationLink href="#tokens/space">Space</NavigationLink>
      <NavigationLink href="#tokens/length">Length</NavigationLink>
      <NavigationLink href="#tokens/icon">Icon</NavigationLink>
      <NavigationLink href="#tokens/breakpoints">Breakpoints</NavigationLink>
      <NavigationLink href="#tokens/media-queries">Media Queries</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Elements">
      <NavigationLink href="#all-elements">All Elements</NavigationLink>
      <NavigationLink href="#elements/accordion">Accordion</NavigationLink>
      <NavigationLink href="#elements/alert">Alert</NavigationLink>
      <NavigationLink href="#elements/announcement">Announcement</NavigationLink>
      <NavigationLink href="#elements/audio-player">Audio Player</NavigationLink>
      <NavigationLink href="#elements/avatar">Avatar</NavigationLink>
      <NavigationLink href="#elements/back-to-top">Back to Top</NavigationLink>
      <NavigationLink href="#elements/badge">Badge</NavigationLink>
      <NavigationLink href="#elements/breadcrumb">Breadcrumb</NavigationLink>
      <NavigationLink href="#elements/button">Button</NavigationLink>
      <NavigationLink href="#elements/card">Card</NavigationLink>
      <NavigationLink href="#elements/chip">Chip</NavigationLink>
      <NavigationLink href="#elements/code-block">Code Block</NavigationLink>
      <NavigationLink href="#elements/call-to-action">Call to Action</NavigationLink>
      <NavigationLink href="#elements/dialog">Dialog</NavigationLink>
      <NavigationLink href="#elements/disclosure">Disclosure</NavigationLink>
      <NavigationLink href="#elements/footer">Footer</NavigationLink>
      <NavigationLink href="#elements/health-index">Health Index</NavigationLink>
      <NavigationLink href="#elements/icon">Icon</NavigationLink>
      <NavigationLink href="#elements/jump-links">Jump Links</NavigationLink>
      <NavigationLink href="#elements/navigation-primary">Navigation Primary</NavigationLink>
      <NavigationLink href="#elements/navigation-secondary">Navigation Secondary</NavigationLink>
      <NavigationLink href="#elements/navigation-vertical">Navigation Vertical</NavigationLink>
      <NavigationLink href="#elements/pagination">Pagination</NavigationLink>
      <NavigationLink href="#elements/progress-indicator">Progress Indicator</NavigationLink>
      <NavigationLink href="#elements/popover">Popover</NavigationLink>
      <NavigationLink href="#elements/progress-steps">Progress Steps</NavigationLink>
      <NavigationLink href="#elements/site-status">Site Status</NavigationLink>
      <NavigationLink href="#elements/skip-link">Skip Link</NavigationLink>
      <NavigationLink href="#elements/spinner">Spinner</NavigationLink>
      <NavigationLink href="#elements/statistic">Statistic</NavigationLink>
      <NavigationLink href="#elements/subnavigation">Subnavigation</NavigationLink>
      <NavigationLink href="#elements/surface">Surface</NavigationLink>
      <NavigationLink href="#elements/switch">Switch</NavigationLink>
      <NavigationLink href="#elements/table">Table</NavigationLink>
      <NavigationLink href="#elements/tabs">Tabs</NavigationLink>
      <NavigationLink href="#elements/tag">Tag</NavigationLink>
      <NavigationLink href="#elements/tile">Tile</NavigationLink>
      <NavigationLink href="#elements/timestamp">Timestamp</NavigationLink>
      <NavigationLink href="#elements/tooltip">Tooltip</NavigationLink>
      <NavigationLink href="#elements/video-embed">Video Embed</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Theming">
      <NavigationLink href="#theming/overview">Overview</NavigationLink>
      <NavigationLink href="#theming/color-palettes">Color Palettes</NavigationLink>
      <NavigationLink href="#theming/customizing">Customizing</NavigationLink>
      <NavigationLink href="#theming/developers">Developers</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Patterns">
      <NavigationLink href="#patterns/all-patterns">All Patterns</NavigationLink>
      <NavigationLink href="#patterns/card">Card</NavigationLink>
      <NavigationLink href="#patterns/tabs">Tabs</NavigationLink>
      <NavigationLink href="#patterns/filter">Filter</NavigationLink>
      <NavigationLink href="#patterns/form">Form</NavigationLink>
      <NavigationLink href="#patterns/link-with-icon">Link with Icon</NavigationLink>
      <NavigationLink href="#patterns/search-bar">Search Bar</NavigationLink>
      <NavigationLink href="#patterns/sticky-banner">Sticky Banner</NavigationLink>
      <NavigationLink href="#patterns/sticky-card">Sticky Card</NavigationLink>
      <NavigationLink href="#patterns/tile">Tile</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Personalization">
      <NavigationLink href="#personalization/all-personalization-patterns">All Personalization Patterns</NavigationLink>
      <NavigationLink href="#personalization/announcement">Announcement</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Accessibility">
      <NavigationLink href="#accessibility/fundamentals">Fundamentals</NavigationLink>
      <NavigationLink href="#accessibility/accessibility-tools">Accessibility Tools</NavigationLink>
      <NavigationLink href="#accessibility/assistive-technologies">Assistive Technologies</NavigationLink>
      <NavigationLink href="#accessibility/ci-cd">CI/CD</NavigationLink>
      <NavigationLink href="#accessibility/content">Content</NavigationLink>
      <NavigationLink href="#accessibility/contributors">Contributors</NavigationLink>
      <NavigationLink href="#accessibility/design">Design</NavigationLink>
      <NavigationLink href="#accessibility/development">Development</NavigationLink>
      <NavigationLink href="#accessibility/manual-testing">Manual Testing</NavigationLink>
      <NavigationLink href="#accessibility/resources">Resources</NavigationLink>
      <NavigationLink href="#accessibility/screen-readers">Screen Readers</NavigationLink>
    </NavigationVerticalList>
    <NavigationLink href="#design-code-status">Design & Code Status</NavigationLink>
    <NavigationLink href="#release-notes">Release Notes</NavigationLink>
    <NavigationLink href="#get-support">Get Support</NavigationLink>
  </NavigationVertical>
  <link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css" />
);

Color Context 

.index-link {
  font-weight: 600;
}
 
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
 
<rh-context-demo>
  <rh-navigation-vertical bordered="inline-start">
    <rh-navigation-link href="#manage-applications" current-page="">Manage applications</rh-navigation-link>
    <rh-navigation-vertical-list summary="1. Managing applications">
      <rh-navigation-link>
        <a class="index-link" href="#managing-applications">Managing applications</a>
      </rh-navigation-link>
      <rh-navigation-vertical-list summary="1.1 Application management lifecycle">
        <rh-navigation-link>
<a class="index-link" href="#application-management-lifecycle">Application Management Lifecycle</a>
        </rh-navigation-link>
        <rh-navigation-link href="#application-model-definitions">1.1.1 Application Model Definitions</rh-navigation-link>
        <rh-navigation-link href="#managing-applications-with-the-console">1.1.2 Managing applications with the console</rh-navigation-link>
        <rh-navigation-link href="#channels">1.1.3 Channels</rh-navigation-link>
        <rh-navigation-link href="#subscriptions">1.1.4 Subscriptions</rh-navigation-link>
        <rh-navigation-link href="#placement-rules">1.1.5 Placement rules</rh-navigation-link>
        <rh-navigation-vertical-list summary="1.1.6 Application">
<rh-navigation-link>
  <a class="index-link" href="#application">Application</a>
</rh-navigation-link>
<rh-navigation-vertical-list summary="1.1.6.1 Creating and managing channels">
  <rh-navigation-link>
    <a class="index-link" href="#creating-and-managing-channels">Creating and managing channels</a>
  </rh-navigation-link>
  <rh-navigation-link href="#creating-channels">1.1.6.1.1 Creating and managing channels</rh-navigation-link>
  <rh-navigation-vertical-list summary="1.1.6.1.2 Updating channel">
    <rh-navigation-link>
      <a class="index-link" href="#updating-channel">Updating channel</a>
    </rh-navigation-link>
    <rh-navigation-link href="#deleting-channel">1.1.6.1.2.1 Deleting channel</rh-navigation-link>
  </rh-navigation-vertical-list>
  <rh-navigation-link href="#managing-deployments-with-channels">1.1.6.1.3 Managing deployments with channels</rh-navigation-link>
</rh-navigation-vertical-list>
        </rh-navigation-vertical-list>
      </rh-navigation-vertical-list>
    </rh-navigation-vertical-list>
    <rh-navigation-link href="#legal-notice">Legal Notice</rh-navigation-link>
  </rh-navigation-vertical>
</rh-context-demo>

<link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css">
 
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { NavigationVertical } from "@rhds/elements/react/rh-navigation-vertical/rh-navigation-vertical.js";
import { NavigationVerticalList } from "@rhds/elements/react/rh-navigation-vertical-list/rh-navigation-vertical-list.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <NavigationVertical bordered="inline-start">
      <NavigationLink href="#manage-applications" current-page>Manage applications</NavigationLink>
      <NavigationVerticalList summary="1. Managing applications">
        <NavigationLink>
<a className="index-link" href="#managing-applications">Managing applications</a>
        </NavigationLink>
        <NavigationVerticalList summary="1.1 Application management lifecycle">
<NavigationLink>
  <a className="index-link" href="#application-management-lifecycle">Application Management Lifecycle</a>
</NavigationLink>
<NavigationLink href="#application-model-definitions">1.1.1 Application Model Definitions</NavigationLink>
<NavigationLink href="#managing-applications-with-the-console">1.1.2 Managing applications with the console</NavigationLink>
<NavigationLink href="#channels">1.1.3 Channels</NavigationLink>
<NavigationLink href="#subscriptions">1.1.4 Subscriptions</NavigationLink>
<NavigationLink href="#placement-rules">1.1.5 Placement rules</NavigationLink>
<NavigationVerticalList summary="1.1.6 Application">
  <NavigationLink>
    <a className="index-link" href="#application">Application</a>
  </NavigationLink>
  <NavigationVerticalList summary="1.1.6.1 Creating and managing channels">
    <NavigationLink>
      <a className="index-link" href="#creating-and-managing-channels">Creating and managing channels</a>
    </NavigationLink>
    <NavigationLink href="#creating-channels">1.1.6.1.1 Creating and managing channels</NavigationLink>
    <NavigationVerticalList summary="1.1.6.1.2 Updating channel">
      <NavigationLink>
        <a className="index-link" href="#updating-channel">Updating channel</a>
      </NavigationLink>
      <NavigationLink href="#deleting-channel">1.1.6.1.2.1 Deleting channel</NavigationLink>
    </NavigationVerticalList>
    <NavigationLink href="#managing-deployments-with-channels">1.1.6.1.3 Managing deployments with channels</NavigationLink>
  </NavigationVerticalList>
</NavigationVerticalList>
        </NavigationVerticalList>
      </NavigationVerticalList>
      <NavigationLink href="#legal-notice">Legal Notice</NavigationLink>
    </NavigationVertical>
  </rh-context-demo>
  <link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css" />
);

Contained 

#container {
  max-width: 280px;
  padding: var(--rh-space-lg, 16px);
}
 
import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
 
<div id="container">
  <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 &amp; 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>

</div>



<link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css">
 
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { NavigationVertical } from "@rhds/elements/react/rh-navigation-vertical/rh-navigation-vertical.js";
import { NavigationVerticalList } from "@rhds/elements/react/rh-navigation-vertical-list/rh-navigation-vertical-list.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="container">
    <NavigationVertical>
      <NavigationLink href="#" current-page>Home</NavigationLink>
      <NavigationVerticalList summary="About">
        <NavigationLink href="#about">About the Design System</NavigationLink>
        <NavigationLink href="#about/roadmap">Roadmap</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Get Started">
        <NavigationLink href="#get-started">About the Design System</NavigationLink>
        <NavigationLink href="#get-started/designers">Designers</NavigationLink>
        <NavigationLink href="#get-started/developers">Developers</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Foundations">
        <NavigationLink href="#foundations">Overview</NavigationLink>
        <NavigationLink href="#foundations/color">Color</NavigationLink>
        <NavigationLink href="#foundations/grid">Grid</NavigationLink>
        <NavigationLink href="#foundations/iconography">Iconography</NavigationLink>
        <NavigationLink href="#foundations/interactions">Interactions</NavigationLink>
        <NavigationLink href="#foundations/spacing">Spacing</NavigationLink>
        <NavigationLink href="#foundations/typography">Typography</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Tokens">
        <NavigationLink href="#tokens">Overview</NavigationLink>
        <NavigationLink href="#tokens/color">Global Color</NavigationLink>
        <NavigationLink href="#tokens/box-shadow">Box Shadow</NavigationLink>
        <NavigationLink href="#tokens/typography">Typography</NavigationLink>
        <NavigationLink href="#tokens/border">Border</NavigationLink>
        <NavigationLink href="#tokens/opacity">Opacity</NavigationLink>
        <NavigationLink href="#tokens/space">Space</NavigationLink>
        <NavigationLink href="#tokens/length">Length</NavigationLink>
        <NavigationLink href="#tokens/icon">Icon</NavigationLink>
        <NavigationLink href="#tokens/breakpoints">Breakpoints</NavigationLink>
        <NavigationLink href="#tokens/media-queries">Media Queries</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Elements">
        <NavigationLink href="#all-elements">All Elements</NavigationLink>
        <NavigationLink href="#elements/accordion">Accordion</NavigationLink>
        <NavigationLink href="#elements/alert">Alert</NavigationLink>
        <NavigationLink href="#elements/announcement">Announcement</NavigationLink>
        <NavigationLink href="#elements/audio-player">Audio Player</NavigationLink>
        <NavigationLink href="#elements/avatar">Avatar</NavigationLink>
        <NavigationLink href="#elements/back-to-top">Back to Top</NavigationLink>
        <NavigationLink href="#elements/badge">Badge</NavigationLink>
        <NavigationLink href="#elements/breadcrumb">Breadcrumb</NavigationLink>
        <NavigationLink href="#elements/button">Button</NavigationLink>
        <NavigationLink href="#elements/card">Card</NavigationLink>
        <NavigationLink href="#elements/chip">Chip</NavigationLink>
        <NavigationLink href="#elements/code-block">Code Block</NavigationLink>
        <NavigationLink href="#elements/call-to-action">Call to Action</NavigationLink>
        <NavigationLink href="#elements/dialog">Dialog</NavigationLink>
        <NavigationLink href="#elements/disclosure">Disclosure</NavigationLink>
        <NavigationLink href="#elements/footer">Footer</NavigationLink>
        <NavigationLink href="#elements/health-index">Health Index</NavigationLink>
        <NavigationLink href="#elements/icon">Icon</NavigationLink>
        <NavigationLink href="#elements/jump-links">Jump Links</NavigationLink>
        <NavigationLink href="#elements/navigation-primary">Navigation Primary</NavigationLink>
        <NavigationLink href="#elements/navigation-secondary">Navigation Secondary</NavigationLink>
        <NavigationLink href="#elements/navigation-vertical">Navigation Vertical</NavigationLink>
        <NavigationLink href="#elements/pagination">Pagination</NavigationLink>
        <NavigationLink href="#elements/progress-indicator">Progress Indicator</NavigationLink>
        <NavigationLink href="#elements/popover">Popover</NavigationLink>
        <NavigationLink href="#elements/progress-steps">Progress Steps</NavigationLink>
        <NavigationLink href="#elements/site-status">Site Status</NavigationLink>
        <NavigationLink href="#elements/skip-link">Skip Link</NavigationLink>
        <NavigationLink href="#elements/spinner">Spinner</NavigationLink>
        <NavigationLink href="#elements/statistic">Statistic</NavigationLink>
        <NavigationLink href="#elements/subnavigation">Subnavigation</NavigationLink>
        <NavigationLink href="#elements/surface">Surface</NavigationLink>
        <NavigationLink href="#elements/switch">Switch</NavigationLink>
        <NavigationLink href="#elements/table">Table</NavigationLink>
        <NavigationLink href="#elements/tabs">Tabs</NavigationLink>
        <NavigationLink href="#elements/tag">Tag</NavigationLink>
        <NavigationLink href="#elements/tile">Tile</NavigationLink>
        <NavigationLink href="#elements/timestamp">Timestamp</NavigationLink>
        <NavigationLink href="#elements/tooltip">Tooltip</NavigationLink>
        <NavigationLink href="#elements/video-embed">Video Embed</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Theming">
        <NavigationLink href="#theming/overview">Overview</NavigationLink>
        <NavigationLink href="#theming/color-palettes">Color Palettes</NavigationLink>
        <NavigationLink href="#theming/customizing">Customizing</NavigationLink>
        <NavigationLink href="#theming/developers">Developers</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Patterns">
        <NavigationLink href="#patterns/all-patterns">All Patterns</NavigationLink>
        <NavigationLink href="#patterns/card">Card</NavigationLink>
        <NavigationLink href="#patterns/tabs">Tabs</NavigationLink>
        <NavigationLink href="#patterns/filter">Filter</NavigationLink>
        <NavigationLink href="#patterns/form">Form</NavigationLink>
        <NavigationLink href="#patterns/link-with-icon">Link with Icon</NavigationLink>
        <NavigationLink href="#patterns/search-bar">Search Bar</NavigationLink>
        <NavigationLink href="#patterns/sticky-banner">Sticky Banner</NavigationLink>
        <NavigationLink href="#patterns/sticky-card">Sticky Card</NavigationLink>
        <NavigationLink href="#patterns/tile">Tile</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Personalization">
        <NavigationLink href="#personalization/all-personalization-patterns">All Personalization Patterns</NavigationLink>
        <NavigationLink href="#personalization/announcement">Announcement</NavigationLink>
      </NavigationVerticalList>
      <NavigationVerticalList summary="Accessibility">
        <NavigationLink href="#accessibility/fundamentals">Fundamentals</NavigationLink>
        <NavigationLink href="#accessibility/accessibility-tools">Accessibility Tools</NavigationLink>
        <NavigationLink href="#accessibility/assistive-technologies">Assistive Technologies</NavigationLink>
        <NavigationLink href="#accessibility/ci-cd">CI/CD</NavigationLink>
        <NavigationLink href="#accessibility/content">Content</NavigationLink>
        <NavigationLink href="#accessibility/contributors">Contributors</NavigationLink>
        <NavigationLink href="#accessibility/design">Design</NavigationLink>
        <NavigationLink href="#accessibility/development">Development</NavigationLink>
        <NavigationLink href="#accessibility/manual-testing">Manual Testing</NavigationLink>
        <NavigationLink href="#accessibility/resources">Resources</NavigationLink>
        <NavigationLink href="#accessibility/screen-readers">Screen Readers</NavigationLink>
      </NavigationVerticalList>
      <NavigationLink href="#design-code-status">Design & Code Status</NavigationLink>
      <NavigationLink href="#release-notes">Release Notes</NavigationLink>
      <NavigationLink href="#get-support">Get Support</NavigationLink>
    </NavigationVertical>
  </div>
  <link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css" />
);

Nested

When nesting <rh-navigation-vertical-list> elements, it's advised limit nesting to 5 levels or less.

.index-link {
  font-weight: 600;
}
 
import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
 
<rh-navigation-vertical bordered="inline-start">
  <rh-navigation-link href="#manage-applications">Manage applications</rh-navigation-link>
  <rh-navigation-vertical-list highlight="" summary="1. Managing applications">
    <rh-navigation-link current-page="">
      <a class="index-link" aria-current="page" href="#managing-applications">Managing applications</a>
    </rh-navigation-link>
    <rh-navigation-vertical-list highlight="" summary="1.1 Application management lifecycle">
      <rh-navigation-link>
        <a class="index-link" href="#application-management-lifecycle">Application Management Lifecycle</a>
      </rh-navigation-link>
      <rh-navigation-link href="#application-model-definitions">1.1.1 Application Model Definitions</rh-navigation-link>
      <rh-navigation-link href="#managing-applications-with-the-console">1.1.2 Managing applications with the console</rh-navigation-link>
      <rh-navigation-link href="#channels">1.1.3 Channels</rh-navigation-link>
      <rh-navigation-link href="#subscriptions">1.1.4 Subscriptions</rh-navigation-link>
      <rh-navigation-link href="#placement-rules">1.1.5 Placement rules</rh-navigation-link>
      <rh-navigation-vertical-list highlight="" summary="1.1.6 Application">
        <rh-navigation-link>
<a class="index-link" href="#application">Application</a>
        </rh-navigation-link>
        <rh-navigation-vertical-list highlight="" summary="1.1.6.1 Creating and managing channels">
<rh-navigation-link>
  <a class="index-link" href="#creating-and-managing-channels">Creating and managing channels</a>
</rh-navigation-link>
<rh-navigation-link href="#creating-channels">1.1.6.1.1 Creating and managing channels</rh-navigation-link>
<rh-navigation-vertical-list highlight="" summary="1.1.6.1.2 Updating channel">
  <rh-navigation-link>
    <a class="index-link" href="#updating-channel">Updating channel</a>
  </rh-navigation-link>
  <rh-navigation-link href="#deleting-channel">1.1.6.1.2.1 Deleting channel</rh-navigation-link>
</rh-navigation-vertical-list>
<rh-navigation-link href="#managing-deployments-with-channels">1.1.6.1.3 Managing deployments with channels</rh-navigation-link>
        </rh-navigation-vertical-list>
      </rh-navigation-vertical-list>
    </rh-navigation-vertical-list>
  </rh-navigation-vertical-list>
  <rh-navigation-link href="#legal-notice">Legal Notice</rh-navigation-link>
</rh-navigation-vertical>

<link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css">
 
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { NavigationVertical } from "@rhds/elements/react/rh-navigation-vertical/rh-navigation-vertical.js";
import { NavigationVerticalList } from "@rhds/elements/react/rh-navigation-vertical-list/rh-navigation-vertical-list.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <NavigationVertical bordered="inline-start">
    <NavigationLink href="#manage-applications">Manage applications</NavigationLink>
    <NavigationVerticalList highlight summary="1. Managing applications">
      <NavigationLink current-page>
        <a className="index-link" aria-current="page" href="#managing-applications">Managing applications</a>
      </NavigationLink>
      <NavigationVerticalList highlight summary="1.1 Application management lifecycle">
        <NavigationLink>
<a className="index-link" href="#application-management-lifecycle">Application Management Lifecycle</a>
        </NavigationLink>
        <NavigationLink href="#application-model-definitions">1.1.1 Application Model Definitions</NavigationLink>
        <NavigationLink href="#managing-applications-with-the-console">1.1.2 Managing applications with the console</NavigationLink>
        <NavigationLink href="#channels">1.1.3 Channels</NavigationLink>
        <NavigationLink href="#subscriptions">1.1.4 Subscriptions</NavigationLink>
        <NavigationLink href="#placement-rules">1.1.5 Placement rules</NavigationLink>
        <NavigationVerticalList highlight summary="1.1.6 Application">
<NavigationLink>
  <a className="index-link" href="#application">Application</a>
</NavigationLink>
<NavigationVerticalList highlight summary="1.1.6.1 Creating and managing channels">
  <NavigationLink>
    <a className="index-link" href="#creating-and-managing-channels">Creating and managing channels</a>
  </NavigationLink>
  <NavigationLink href="#creating-channels">1.1.6.1.1 Creating and managing channels</NavigationLink>
  <NavigationVerticalList highlight summary="1.1.6.1.2 Updating channel">
    <NavigationLink>
      <a className="index-link" href="#updating-channel">Updating channel</a>
    </NavigationLink>
    <NavigationLink href="#deleting-channel">1.1.6.1.2.1 Deleting channel</NavigationLink>
  </NavigationVerticalList>
  <NavigationLink href="#managing-deployments-with-channels">1.1.6.1.3 Managing deployments with channels</NavigationLink>
</NavigationVerticalList>
        </NavigationVerticalList>
      </NavigationVerticalList>
    </NavigationVerticalList>
    <NavigationLink href="#legal-notice">Legal Notice</NavigationLink>
  </NavigationVertical>
  <link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css" />
);

Open 

import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
 
<rh-navigation-vertical>
  <rh-navigation-link href="#">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" open="">
    <rh-navigation-link href="#all-elements" current-page="">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 &amp; 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">
 
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { NavigationVertical } from "@rhds/elements/react/rh-navigation-vertical/rh-navigation-vertical.js";
import { NavigationVerticalList } from "@rhds/elements/react/rh-navigation-vertical-list/rh-navigation-vertical-list.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <NavigationVertical>
    <NavigationLink href="#">Home</NavigationLink>
    <NavigationVerticalList summary="About">
      <NavigationLink href="#about">About the Design System</NavigationLink>
      <NavigationLink href="#about/roadmap">Roadmap</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Get Started">
      <NavigationLink href="#get-started">About the Design System</NavigationLink>
      <NavigationLink href="#get-started/designers">Designers</NavigationLink>
      <NavigationLink href="#get-started/developers">Developers</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Foundations">
      <NavigationLink href="#foundations">Overview</NavigationLink>
      <NavigationLink href="#foundations/color">Color</NavigationLink>
      <NavigationLink href="#foundations/grid">Grid</NavigationLink>
      <NavigationLink href="#foundations/iconography">Iconography</NavigationLink>
      <NavigationLink href="#foundations/interactions">Interactions</NavigationLink>
      <NavigationLink href="#foundations/spacing">Spacing</NavigationLink>
      <NavigationLink href="#foundations/typography">Typography</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Tokens">
      <NavigationLink href="#tokens">Overview</NavigationLink>
      <NavigationLink href="#tokens/color">Global Color</NavigationLink>
      <NavigationLink href="#tokens/box-shadow">Box Shadow</NavigationLink>
      <NavigationLink href="#tokens/typography">Typography</NavigationLink>
      <NavigationLink href="#tokens/border">Border</NavigationLink>
      <NavigationLink href="#tokens/opacity">Opacity</NavigationLink>
      <NavigationLink href="#tokens/space">Space</NavigationLink>
      <NavigationLink href="#tokens/length">Length</NavigationLink>
      <NavigationLink href="#tokens/icon">Icon</NavigationLink>
      <NavigationLink href="#tokens/breakpoints">Breakpoints</NavigationLink>
      <NavigationLink href="#tokens/media-queries">Media Queries</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Elements" open>
      <NavigationLink href="#all-elements" current-page>All Elements</NavigationLink>
      <NavigationLink href="#elements/accordion">Accordion</NavigationLink>
      <NavigationLink href="#elements/alert">Alert</NavigationLink>
      <NavigationLink href="#elements/announcement">Announcement</NavigationLink>
      <NavigationLink href="#elements/audio-player">Audio Player</NavigationLink>
      <NavigationLink href="#elements/avatar">Avatar</NavigationLink>
      <NavigationLink href="#elements/back-to-top">Back to Top</NavigationLink>
      <NavigationLink href="#elements/badge">Badge</NavigationLink>
      <NavigationLink href="#elements/breadcrumb">Breadcrumb</NavigationLink>
      <NavigationLink href="#elements/button">Button</NavigationLink>
      <NavigationLink href="#elements/card">Card</NavigationLink>
      <NavigationLink href="#elements/chip">Chip</NavigationLink>
      <NavigationLink href="#elements/code-block">Code Block</NavigationLink>
      <NavigationLink href="#elements/call-to-action">Call to Action</NavigationLink>
      <NavigationLink href="#elements/dialog">Dialog</NavigationLink>
      <NavigationLink href="#elements/disclosure">Disclosure</NavigationLink>
      <NavigationLink href="#elements/footer">Footer</NavigationLink>
      <NavigationLink href="#elements/health-index">Health Index</NavigationLink>
      <NavigationLink href="#elements/icon">Icon</NavigationLink>
      <NavigationLink href="#elements/jump-links">Jump Links</NavigationLink>
      <NavigationLink href="#elements/navigation-primary">Navigation Primary</NavigationLink>
      <NavigationLink href="#elements/navigation-secondary">Navigation Secondary</NavigationLink>
      <NavigationLink href="#elements/navigation-vertical">Navigation Vertical</NavigationLink>
      <NavigationLink href="#elements/pagination">Pagination</NavigationLink>
      <NavigationLink href="#elements/progress-indicator">Progress Indicator</NavigationLink>
      <NavigationLink href="#elements/popover">Popover</NavigationLink>
      <NavigationLink href="#elements/progress-steps">Progress Steps</NavigationLink>
      <NavigationLink href="#elements/site-status">Site Status</NavigationLink>
      <NavigationLink href="#elements/skip-link">Skip Link</NavigationLink>
      <NavigationLink href="#elements/spinner">Spinner</NavigationLink>
      <NavigationLink href="#elements/statistic">Statistic</NavigationLink>
      <NavigationLink href="#elements/subnavigation">Subnavigation</NavigationLink>
      <NavigationLink href="#elements/surface">Surface</NavigationLink>
      <NavigationLink href="#elements/switch">Switch</NavigationLink>
      <NavigationLink href="#elements/table">Table</NavigationLink>
      <NavigationLink href="#elements/tabs">Tabs</NavigationLink>
      <NavigationLink href="#elements/tag">Tag</NavigationLink>
      <NavigationLink href="#elements/tile">Tile</NavigationLink>
      <NavigationLink href="#elements/timestamp">Timestamp</NavigationLink>
      <NavigationLink href="#elements/tooltip">Tooltip</NavigationLink>
      <NavigationLink href="#elements/video-embed">Video Embed</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Theming">
      <NavigationLink href="#theming/overview">Overview</NavigationLink>
      <NavigationLink href="#theming/color-palettes">Color Palettes</NavigationLink>
      <NavigationLink href="#theming/customizing">Customizing</NavigationLink>
      <NavigationLink href="#theming/developers">Developers</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Patterns">
      <NavigationLink href="#patterns/all-patterns">All Patterns</NavigationLink>
      <NavigationLink href="#patterns/card">Card</NavigationLink>
      <NavigationLink href="#patterns/tabs">Tabs</NavigationLink>
      <NavigationLink href="#patterns/filter">Filter</NavigationLink>
      <NavigationLink href="#patterns/form">Form</NavigationLink>
      <NavigationLink href="#patterns/link-with-icon">Link with Icon</NavigationLink>
      <NavigationLink href="#patterns/search-bar">Search Bar</NavigationLink>
      <NavigationLink href="#patterns/sticky-banner">Sticky Banner</NavigationLink>
      <NavigationLink href="#patterns/sticky-card">Sticky Card</NavigationLink>
      <NavigationLink href="#patterns/tile">Tile</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Personalization">
      <NavigationLink href="#personalization/all-personalization-patterns">All Personalization Patterns</NavigationLink>
      <NavigationLink href="#personalization/announcement">Announcement</NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList summary="Accessibility">
      <NavigationLink href="#accessibility/fundamentals">Fundamentals</NavigationLink>
      <NavigationLink href="#accessibility/accessibility-tools">Accessibility Tools</NavigationLink>
      <NavigationLink href="#accessibility/assistive-technologies">Assistive Technologies</NavigationLink>
      <NavigationLink href="#accessibility/ci-cd">CI/CD</NavigationLink>
      <NavigationLink href="#accessibility/content">Content</NavigationLink>
      <NavigationLink href="#accessibility/contributors">Contributors</NavigationLink>
      <NavigationLink href="#accessibility/design">Design</NavigationLink>
      <NavigationLink href="#accessibility/development">Development</NavigationLink>
      <NavigationLink href="#accessibility/manual-testing">Manual Testing</NavigationLink>
      <NavigationLink href="#accessibility/resources">Resources</NavigationLink>
      <NavigationLink href="#accessibility/screen-readers">Screen Readers</NavigationLink>
    </NavigationVerticalList>
    <NavigationLink href="#design-code-status">Design & Code Status</NavigationLink>
    <NavigationLink href="#release-notes">Release Notes</NavigationLink>
    <NavigationLink href="#get-support">Get Support</NavigationLink>
  </NavigationVertical>
  <link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css" />
);
 
import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
 
<rh-navigation-vertical>
  <rh-navigation-link>
    <a href="#" aria-current="page">Home</a>
  </rh-navigation-link>

  <rh-navigation-vertical-list>
    <span slot="summary">About</span>
    <rh-navigation-link>
      <a href="#about-the-design-system">About the Design System</a>
    </rh-navigation-link>
    <rh-navigation-link>
      <a href="#about/roadmap">Roadmap</a>
    </rh-navigation-link>
  </rh-navigation-vertical-list>

  <rh-navigation-vertical-list>
    <span slot="summary">Get Started</span>
    <rh-navigation-link>
      <a href="#get-started">About the Design System</a>
    </rh-navigation-link>
    <rh-navigation-link>
      <a href="#get-started/designers">Designers</a>
    </rh-navigation-link>
    <rh-navigation-link>
      <a href="#get-started/developers">Developers</a>
    </rh-navigation-link>
  </rh-navigation-vertical-list>
</rh-navigation-vertical>

<link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css">
 
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { NavigationVertical } from "@rhds/elements/react/rh-navigation-vertical/rh-navigation-vertical.js";
import { NavigationVerticalList } from "@rhds/elements/react/rh-navigation-vertical-list/rh-navigation-vertical-list.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <NavigationVertical>
    <NavigationLink><a href="#" aria-current="page">Home</a></NavigationLink>
    <NavigationVerticalList>
      <span slot="summary">About</span>
      <NavigationLink>
        <a href="#about-the-design-system">About the Design System</a>
      </NavigationLink>
      <NavigationLink><a href="#about/roadmap">Roadmap</a></NavigationLink>
    </NavigationVerticalList>
    <NavigationVerticalList>
      <span slot="summary">Get Started</span>
      <NavigationLink><a href="#get-started">About the Design System</a></NavigationLink>
      <NavigationLink><a href="#get-started/designers">Designers</a></NavigationLink>
      <NavigationLink><a href="#get-started/developers">Developers</a></NavigationLink>
    </NavigationVerticalList>
  </NavigationVertical>
  <link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css" />
);

Slotted Icons 

rh-navigation-link > span {
  display: inline-flex;
  gap: var(--rh-space-md, 8px);
  align-items: center;
}
rh-navigation-vertical-list > span {
  display: inline-flex;
  gap: var(--rh-space-md, 8px);
  align-items: center;
}
 
import '@rhds/elements/rh-navigation-vertical/rh-navigation-vertical.js';
 
<rh-navigation-vertical>
  <rh-navigation-link href="#" current-page="">
    <span><rh-icon set="ui" icon="home-fill"></rh-icon> Icon Example 1</span>
  </rh-navigation-link>
    <rh-navigation-link href="#">
    <span><rh-icon set="ui" icon="language-fill"></rh-icon> Icon Example 2</span>
  </rh-navigation-link>
    <rh-navigation-link href="#">
    <span><rh-icon set="ui" icon="secured-fill"></rh-icon> Icon Example 3</span>
  </rh-navigation-link>
    <rh-navigation-link href="#">
    <span><rh-icon set="ui" icon="bug-fill"></rh-icon> Icon Example 4</span>
  </rh-navigation-link>
  <rh-navigation-vertical-list>
    <span slot="summary"><rh-icon set="ui" icon="check-circle-fill"></rh-icon> Icon Example 5</span>
    <rh-navigation-link href="#">
    <span><rh-icon set="ui" icon="cloud-fill"></rh-icon>Icon Example 6</span>
  </rh-navigation-link>
  <rh-navigation-link href="#">
    <span><rh-icon set="ui" icon="folder-fill"></rh-icon> Icon Example 7</span>
  </rh-navigation-link>
  </rh-navigation-vertical-list>
</rh-navigation-vertical>

<link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css">
 
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { NavigationVertical } from "@rhds/elements/react/rh-navigation-vertical/rh-navigation-vertical.js";
import { NavigationVerticalList } from "@rhds/elements/react/rh-navigation-vertical-list/rh-navigation-vertical-list.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <NavigationVertical>
    <NavigationLink href="#" current-page>
      <span>
        <Icon set="ui" icon="home-fill" />
        Icon Example 1
      </span>
    </NavigationLink>
    <NavigationLink href="#">
      <span>
        <Icon set="ui" icon="language-fill" />
        Icon Example 2
      </span>
    </NavigationLink>
    <NavigationLink href="#">
      <span>
        <Icon set="ui" icon="secured-fill" />
        Icon Example 3
      </span>
    </NavigationLink>
    <NavigationLink href="#">
      <span>
        <Icon set="ui" icon="bug-fill" />
        Icon Example 4
      </span>
    </NavigationLink>
    <NavigationVerticalList>
      <span slot="summary">
        <Icon set="ui" icon="check-circle-fill" />
        Icon Example 5
      </span>
      <NavigationLink href="#">
        <span>
<Icon set="ui" icon="cloud-fill" />
Icon Example 6
        </span>
      </NavigationLink>
      <NavigationLink href="#">
        <span>
<Icon set="ui" icon="folder-fill" />
Icon Example 7
        </span>
      </NavigationLink>
    </NavigationVerticalList>
  </NavigationVertical>
  <link rel="stylesheet" href="../rh-navigation-vertical-lightdom.css" />
);
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify