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" />
);