Mobile menu

Full-screen navigation for small viewports, built on the native dialog.

Show the markup

<div style="background:var(--cc-brand-deep);padding:1rem;border-radius:var(--cc-radius-md)">
  <button class="cc-mobile-menu__toggle" type="button" aria-haspopup="dialog" aria-controls="ex-menu"><svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#menu"/></svg> Menu</button>
</div>
<dialog class="cc-mobile-menu" id="ex-menu" aria-label="Menu">
  <div class="cc-mobile-menu__bar">
    Menu <button type="button" data-close><svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#x"/></svg> Close</button>
  </div>
  <nav aria-label="Primary">
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <button type="button" aria-expanded="false" aria-controls="ex-menu-services">Services</button>
        <ul id="ex-menu-services" hidden>
          <li><a href="#">Trash &amp; recycling</a></li>
          <li><a href="#">Permits</a></li>
        </ul>
      </li>
      <li><a href="#">Departments</a></li>
      <li><a href="#">News</a></li>
    </ul>
  </nav>
</dialog>

Accessibility

The toggle carries its own brand-deep background, so it stays visible wherever it sits — not only on a deep header.
A native modal <dialog>: focus is trapped, Esc closes, focus returns to the toggle.
The toggle announces itself with aria-haspopup="dialog" and a visible text label — never a bare hamburger icon.
Sections expand with aria-expanded disclosure buttons; sub-lists are real nested lists.
Every row is a full-width 44px target.