Mega menu

Preview Available in release assets

Organize a larger set of site destinations into visible, headed groups inside a native disclosure.

<nav class="thin-navigation-menu" aria-label="Primary">
  <ul>
    <li><a href="/latest/">Latest</a></li>
    <li>
      <details open>
        <summary>Explore</summary>
        <div class="thin-mega-menu">
          <section aria-labelledby="mega-topics">
            <h2 id="mega-topics">Topics</h2>
            <ul>
              <li><a href="/topics/design/">Design systems</a></li>
              <li><a href="/topics/accessibility/">Accessibility</a></li>
            </ul>
          </section>
          <section aria-labelledby="mega-formats">
            <h2 id="mega-formats">Formats</h2>
            <ul>
              <li><a href="/formats/field-notes/">Field notes</a></li>
              <li><a href="/formats/interviews/">Interviews with independent makers</a></li>
            </ul>
          </section>
          <section aria-labelledby="mega-featured">
            <h2 id="mega-featured">Featured</h2>
            <p><a href="/stories/durable-web/">A durable web for small publications</a></p>
          </section>
        </div>
      </details>
    </li>
    <li><a href="/about/">About</a></li>
  </ul>
</nav>

Show code

<nav class="thin-navigation-menu" aria-label="Primary">
  <ul>
    <li><a href="/latest/">Latest</a></li>
    <li>
      <details open>
        <summary>Explore</summary>
        <div class="thin-mega-menu">
          <section aria-labelledby="mega-topics">
            <h2 id="mega-topics">Topics</h2>
            <ul>
              <li><a href="/topics/design/">Design systems</a></li>
              <li><a href="/topics/accessibility/">Accessibility</a></li>
            </ul>
          </section>
          <section aria-labelledby="mega-formats">
            <h2 id="mega-formats">Formats</h2>
            <ul>
              <li><a href="/formats/field-notes/">Field notes</a></li>
              <li><a href="/formats/interviews/">Interviews with independent makers</a></li>
            </ul>
          </section>
          <section aria-labelledby="mega-featured">
            <h2 id="mega-featured">Featured</h2>
            <p><a href="/stories/durable-web/">A durable web for small publications</a></p>
          </section>
        </div>
      </details>
    </li>
    <li><a href="/about/">About</a></li>
  </ul>
</nav>

Anatomy

Navigation menu
Native details and summary
Mega-menu grouping container
Headed semantic sections
Ordinary destination links

Variants and sizes

Two-column groups
Three-column groups
Featured destination
Authored open state

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

States and difficult content

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

Closed
Open
Current destination
Long localized headings
Narrow container
Right-to-left content
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The summary toggles native details state; links retain ordinary navigation. Thin-Sky does not add hover-only opening, focus trapping, arrow-key grids, or viewport-positioning JavaScript.

Accessibility

Keep group headings visible, maintain a logical source order, expose every destination as a real link, avoid menu and menuitem roles for site navigation, and never require hover to reveal essential destinations.

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

Place .thin-mega-menu inside details within nav.thin-navigation-menu. Group links in labelled sections with headings and semantic lists.

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 or JavaScript, the native disclosure exposes headed groups of ordinary links; print styles expose the full destination set.

Assets and dependencies

/foundation.css
/components.css

Dependencies: None

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