Navigation

Each bar is a nav named with aria-label: a title (an a if it links, a span if not), a ul of links, and an optional spacer. Stack bars for levels (like the two above); nest a list for a dropdown. No classes, no IDs, no JavaScript.

<nav aria-label="Site">
  <a href="/">brand</a>
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
    <li><a href="/pricing/">Pricing</a></li>
  </ul>
</nav>

<nav aria-label="Site">
  <a href="/">brand</a>
  <ul><li><a href="/" aria-current="page">Home</a></li> … </ul>
</nav>

<nav class="paging" aria-label="Pagination">
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a> …
</nav>