navigation menu

Example

Open Product for a grouped panel or Resources for a compact dropdown. The example includes mobile width, right alignment, and theme controls.

Open the full example

Usage

Add data-navigation-menu to the header’s direct native nav. Mix ordinary links with native details groups. Import header.js for floating desktop panels and responsive collapse.

<script type="module" src="header.js"></script>
<header>
  <m-header align="end">
    <a data-brand href="/">Acme</a>
    <nav id="primary" aria-label="Primary" data-navigation-menu>
      <details>
        <summary>Product</summary>
        <div data-nav-panel style="--nav-panel-width: 17rem">
          <a href="/projects" aria-current="page">
            <strong>Projects</strong>
            <small>Keep every project moving.</small>
          </a>
          <a href="/teams">Teams</a>
        </div>
      </details>
      <a href="/pricing">Pricing</a>
    </nav>
    <button type="button" data-menu popovertarget="primary">Menu</button>
  </m-header>
</header>

The Menu button is optional. Without it the header stays expanded, while nested panels still enhance. The existing align="end", brand, and action contracts apply unchanged.

Richer panels

Panel contents are your HTML: links, descriptions, headings, and layouts. A plain link works without a description. No icons are required or supplied. Use aria-current="page" on the actual destination.

Compose a responsive m-grid inside a panel, or author a grid that becomes one column when the header collapses. For a native intrinsic grid, set --min to the minimum column width.

<div data-nav-panel>
  <m-grid style="--min: 14rem">
    <section>
      <h2>Workspace</h2>
      <a href="/projects"><strong>Projects</strong><small>Track your work.</small></a>
    </section>
    <section>
      <h2>Organization</h2>
      <a href="/teams"><strong>Teams</strong><small>Work together.</small></a>
    </section>
  </m-grid>
</div>

Behavior and accessibility

• Click, touch, Enter, or Space toggles a native disclosure. Enhancement keeps one top-level group open.
• Tab and Shift+Tab follow normal link order. Escape closes a group and focuses its summary. A second Escape closes the mobile Menu.
• Clicking outside, moving focus outside the navigation, or following an unprevented link closes the panels. Modified link clicks retain normal browser behavior.
• On desktop, panels align with their trigger, clamp to the viewport, and flip above when space requires it. They use fixed positioning, not the top layer; avoid transformed or clipping ancestors around the header.
• On narrow headers, groups expand inline inside the existing scrollable Menu. Resizing restores focus to a visible control.
• Without JavaScript, groups remain native disclosures in the wrapping header. Optional shared name attributes provide native exclusivity; use a unique name per header.

These are site navigation links, so do not add role="menu" or menuitem. Cascading fly-out submenus and hover-to-open behavior are outside this pattern. Use grouped panels for another level of organization.

API

Shared typography uses the header’s font-size, font-weight, and strong-weight tokens. Color and radius follow Mica’s semantic tokens. Internal data-m-* attributes and --m-* properties belong to the enhancement.