Skip to content

Navigation menu

Preview Available in release assets

Present durable site destinations, with optional native disclosure for a compact group of related links.

Show code
<nav class="thin-navigation-menu" aria-label="Primary">
  <ul>
    <li><a href="/latest/" aria-current="page">Latest</a></li>
    <li>
      <details>
        <summary>Topics</summary>
        <ul>
          <li><a href="/topics/design/">Design</a></li>
          <li><a href="/topics/technology/">Appropriate technology</a></li>
          <li><a href="/topics/culture/">Culture and community</a></li>
        </ul>
      </details>
    </li>
    <li><a href="/membership/">Membership</a></li>
  </ul>
</nav>

Anatomy

  • Labelled nav landmark
  • Top-level semantic list
  • Ordinary destination links
  • Optional details and summary submenu
  • Nested semantic link list

Variants and sizes

  • Flat destinations
  • One native disclosure
  • Multiple disclosure groups
  • Current destination

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Closed disclosure
  • Open disclosure
  • Current page
  • Long localized labels
  • Narrow container
  • Right-to-left content
  • Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links navigate normally and details/summary supplies browser-owned pointer, keyboard, and touch disclosure behavior without custom JavaScript.

Accessibility

Name the navigation landmark, keep all destinations as real links, use details only for disclosure rather than navigation itself, and do not add application-menu roles or override native summary keyboard behavior.

Contract
DISCLOSURE
Basis
Native labelled navigation, links, and disclosure; no menu/menuitem claim in the current authored markup
Evidence
  • tests/unit/library/content-navigation.test.ts
  • tests/unit/library/navigation-patterns.test.ts

API

Use nav.thin-navigation-menu containing a top-level ul. A submenu is details with a descriptive summary and nested ul; direct destinations remain anchors.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without CSS the complete semantic list and native details disclosure remain readable, keyboard operable, and navigable.

Assets and dependencies

  • /foundation.css
  • /components.css

Dependencies: None

Source: packages/ui/src/items/navigation-patterns/style.ts