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">