Subnav

Two-level accordion navigation beside the page content, with a compact section menu on mobile.

Show the markup

<nav class="cc-subnav" aria-label="Community services" style="max-width:20rem">
  <details class="cc-subnav__disclosure" open>
    <summary class="cc-subnav__toggle">In this section</summary>
    <div class="cc-subnav__body">
      <p class="cc-subnav__label">Community services</p>
      <ul>
        <li><details class="cc-subnav__group" open><summary>Community rooms</summary><ul>
          <li><a href="/templates/service/" aria-current="page">Reserve a room</a></li>
          <li><a href="/templates/service/#rooms">Rooms and fees</a></li>
          <li><a href="/templates/service/#access">Access and facilities</a></li>
        </ul></details></li>
        <li><details class="cc-subnav__group"><summary>Your request</summary><ul>
          <li><a href="/templates/application/">Apply online</a></li>
          <li><a href="/templates/service/#questions">Common questions</a></li>
        </ul></details></li>
        <li><a href="/templates/town-homepage/#contact">Contact the town</a></li>
      </ul>
    </div>
  </details>
</nav>

Show the markup

<nav class="cc-subnav cc-subnav--compact" aria-label="Community services mobile example" style="max-width:22rem">
  <details class="cc-subnav__disclosure" open>
    <summary class="cc-subnav__toggle">In this section</summary>
    <div class="cc-subnav__body">
      <p class="cc-subnav__label">Community services</p>
      <ul>
        <li><details class="cc-subnav__group" open><summary>Community rooms</summary><ul>
          <li><a href="/templates/service/" aria-current="page">Reserve a room</a></li>
          <li><a href="/templates/service/#rooms">Rooms and fees</a></li>
          <li><a href="/templates/service/#access">Access and facilities</a></li>
        </ul></details></li>
        <li><details class="cc-subnav__group"><summary>Your request</summary><ul>
          <li><a href="/templates/application/">Apply online</a></li>
          <li><a href="/templates/service/#questions">Common questions</a></li>
        </ul></details></li>
      </ul>
    </div>
  </details>
</nav>

See the sidebar beside real content in the service page template.

Usage and accessibility

Place it inside the page layout, beside the main content on desktop and before the content on mobile. It is not a second header bar.
Use a summary for each first-level group and real links for the second level. Keep the hierarchy to two levels; use a direct link for a destination with no children.
Native details and summary provide keyboard behavior and announced expanded states. Multiple groups may stay open.
Mark the current destination with aria-current="page" and render its group open. The active link has a marker and bold text as well as a tinted background.
Below 48rem, Curbcut collapses the outer disclosure into a section menu. The same links and nested accordions remain available. Without JavaScript it starts open and remains usable.
cc-subnav--compact gives narrow desktop panels the same presentation; it is used above to preview mobile behavior.
Every link and summary has a minimum 44px target. Give the navigation a name distinct from the site’s primary navigation.