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

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

Persistent wayfinding navigation for linking related pages below <rh-navigation-primary>. Provides role="navigation" with a configurable aria-label and light/dark color palettes. On mobile, items collapse behind a menu button. Keyboard navigation with Tab, Escape, Enter/Space. Should contain logo, nav (<ul>), and optional cta slots. Avoid using more then 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.

Expandable dropdown menu panel for secondary navigation. Provides full-width (default) and fixed-width layouts with content organized in a CSS grid. Must be placed inside the menu slot of an <rh-navigation-secondary-dropdown>. Tab navigates through menu content; Escape closes the menu. Screen readers access content via section headings and aria-labelledby associations.

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

'lightest'

'fixed-width' | 'full-width'

'full-width'

boolean

false

Semi-transparent backdrop for dimming page content when a secondary navigation dropdown or mobile menu is expanded. Provides a click target that allows users to close 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