Navigation

Four nav patterns — top nav, sub-nav, sidebar nav, TOC nav. No classes. aria-current for active state.

Four patterns. Active state via aria-current="page". No class names.

Top nav

The nav bar at the top of this page is a live demo. Two <ul> lists: brand left, links right. Pipe dividers are CSS — remove a link, the pipe goes with it.

<nav>
  <ul><li><a href="/"><strong>Brand</strong></a></li></ul>
  <ul>
    <li><a href="/docs/">Docs</a></li>
    <li><a href="/lab/" aria-current="page">Lab</a></li>
    <li><a href="/source" data-text="dim">Source</a></li>
  </ul>
</nav>

A <details> inside a nav list item becomes a dropdown. No JavaScript.

A horizontal strip inside <main>. Monospace, small. Active link full-brightness; others dimmed.

data-nav="sidebar" — vertical, labelled sections, sticky in a docs layout. The aria-current="page" link gets accent background.

<aside>
  <nav aria-label="Documentation" data-nav="sidebar">
    <small>Documentation</small>
    <ul>
      <li><a href="index.html">Introduction</a></li>
      <li><a href="getting-started.html">Getting Started</a></li>
    </ul>
    <small>Components</small>
    <ul>
      <li><a href="components/nav.html" aria-current="page">Navigation</a></li>
    </ul>
  </nav>
</aside>

TOC nav

data-nav="toc" — compact in-page contents for the right column. Pairs with toc-spy.js to track scroll position via aria-current.

<aside data-toc>
  <nav aria-label="On this page" data-nav="toc">
    <small>On this page</small>
    <ul>
      <li><a href="#top-nav">Top nav</a></li>
      <li><a href="#subnav">Sub-navigation</a></li>
      <li><a href="#sidebar-nav" aria-current="true">Sidebar nav</a></li>
    </ul>
  </nav>
</aside>