Navigation (secondary)

<script type="module">
  import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js';
</script>

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

<link rel="stylesheet" href="/path/to/rh-navigation-secondary/rh-navigation-secondary-lightdom.css">

<meta itemprop="description" content="Default secondary navigation demo with logo, nav links, dropdowns, and call to action.">
<rh-navigation-secondary>
  <a href="#" slot="logo" id="logo-id" aria-current="page">
    Logo/Title
  </a>
  <ul slot="nav" aria-labelledby="logo-id">
    <li>
      <rh-navigation-secondary-dropdown>
        <a href="#dropdown-fallback-url" slot="link">Dropdown</a>
        <rh-navigation-secondary-menu slot="menu">
          <rh-navigation-secondary-menu-section>
            <h3 slot="header">Section</h3>
            <ul slot="links">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
            <rh-cta slot="cta" href="#">Section CTA</rh-cta>
          </rh-navigation-secondary-menu-section>
          <rh-navigation-secondary-menu-section>
            <h3 slot="header">Section</h3>
            <ul slot="links">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
            <rh-cta slot="cta" href="#">Section CTA</rh-cta>
          </rh-navigation-secondary-menu-section>
        </rh-navigation-secondary-menu>
      </rh-navigation-secondary-dropdown>
    </li>
    <li>
      <rh-navigation-secondary-dropdown>
        <a href="#dropdown-fallback-url" slot="link">Dropdown</a>
        <rh-navigation-secondary-menu slot="menu">
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </rh-navigation-secondary-menu>
      </rh-navigation-secondary-dropdown>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <rh-cta slot="cta" href="#">Call to Action</rh-cta>
</rh-navigation-secondary>

<link rel="stylesheet" href="../rh-navigation-secondary-lightdom.css">

<script type="module">
  import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js';
  import '@rhds/elements/rh-cta/rh-cta.js';
</script>

When a user is viewing a page that is part of the secondary navigation information architecture, a red top border is visible. If the current active page is part of a dropdown menu, that dropdown is highlighted with the same top border to indicate it contains the current page. For more details on how to use this current page indicator, refer to the design guidelines for current page indicator.

To enable this indicator style, implementation should apply the aria-current="page" attribute to the current page link.

<a href="/" aria-current="page">Current page being viewed</a>

The rh-navigation-secondary element does not apply the aria-current="page" attribute itself. The responsibility for keeping track of which link is currently active falls on the content management system or application. The element checks for the presence of this attribute and applies the current page indicator style to nav links and dropdown menus when the active page is within a dropdown menu.

Connects a series of related pages with persistent wayfinding navigation below the primary nav. Uses role="navigation" with a configurable aria-label. Supports light and dark color palettes. On mobile, nav items collapse behind a hamburger menu button. Keyboard: Tab moves between links/dropdowns, Escape closes expanded menus and mobile menu, Enter/Space toggles dropdown expansion. MUST be used with <rh-navigation-primary> above it. SHOULD contain a logo slot, nav slot with <ul>, and optional cta slot. AVOID more than 5 nav items.

'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'

'lighter'

string

'secondary'

Wraps a top-level nav link to add expandable dropdown menu functionality. Upgrades the slotted <a> with role="button", aria-expanded, and aria-controls for accessibility. Highlights with a red top border when the dropdown contains the current page (aria-current="page"). Keyboard: Enter/Space toggles the dropdown; Tab moves through menu items; Escape closes. MUST contain an <a> in the link slot and an <rh-navigation-secondary-menu> in the menu slot.

Groups related links under a heading within a dropdown menu. Automatically wires aria-labelledby between the slotted heading and adjacent <ul>/<ol> for screen reader navigation. Renders as a <section> element. MUST contain a heading in the header slot and a list in the links slot. SHOULD provide an id on the heading or one will be auto-generated. Tab navigates through links; the heading provides group context to assistive technology.

The expandable dropdown menu panel for secondary navigation. Supports full-width (default) and fixed-width layouts. Contains <rh-navigation-secondary-menu-section> children organized in a CSS grid. Always renders on the lightest color palette. Visibility is toggled by the parent <rh-navigation-secondary-dropdown>. MUST be placed inside the menu slot of a dropdown. Tab navigates through menu content; Escape closes the menu. Screen readers access content via section headings.

'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'

'lightest'

'fixed-width' | 'full-width'

'full-width'

boolean

false

Semi-transparent backdrop overlay that dims page content when a secondary navigation dropdown or mobile menu is expanded. Clicking the overlay closes all open menus. Managed automatically by <rh-navigation-secondary>. AVOID using standalone. Screen readers SHOULD ignore this element as it serves a purely visual purpose. Keyboard: Escape closes the overlay.

boolean

false