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>

Full nav bar markup with Home current, plus Docs and Pricing

A bar

A bar is the basic horizontal nav strip: a brand link on one side and a row of page links beside it. It is the single nav you stack to build every other pattern on this page, and the current page is marked with aria-current="page".

It is a nav labelled with aria-label, holding a brand a followed by a ul of links. The stylesheet lays the bar out from that structure alone — no classes on the links, no script.

<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>

One bar nav with Home current, plus Docs and Pricing.

Dropdown: click

A click dropdown reveals a submenu only when its label is tapped, so it works on touch as well as with a mouse. Giving the menus in a bar a shared name makes them mutually exclusive — opening one closes the rest.

The submenu is a nested ul inside a details, with its summary as the toggle. The browser handles open and close for free, and the shared name on each details keeps them exclusive.

<li>
  <details name="menu">
    <summary>Components</summary>
    <ul>
      <li><a href="button/">Button</a></li>
      <li><a href="form/">Form</a></li>
    </ul>
  </details>
</li>

A click menu: a nested list inside a named details.

Dropdown: hover & focus

A hover dropdown opens as the pointer moves over its parent link, or when the parent is reached by keyboard. The parent stays a real link, so a tap still navigates — handy on touch where hover is unavailable.

The submenu is a bare nested ul that sits beside the parent a inside the li. The stylesheet shows it on :hover and :focus-within, so hover and keyboard focus both open it.

<li>
  <a href="components/">Components</a>
  <ul>
    <li><a href="button/">Button</a></li>
    <li><a href="form/">Form</a></li>
  </ul>
</li>

A hover/focus menu: a bare nested list beside its parent link.

Sidebar menu

A sidebar menu is a vertical list of links running down the side of a page, grouped under short headings. It suits admin screens and docs, where sections such as Users and Groups each gather a handful of actions.

Users
List
View
Add
Groups
List
Add

The menu sits in a row beside the page content, which takes the remaining width.

It is a menu wrapping a ul of links. A bare p in a li becomes an uppercase group label, and the current item carries aria-current="page".

<menu>
  <ul>
    <li><p>Users</p></li>
    <li><a href="users/" aria-current="page">List</a></li>
    <li><a href="users/add/">Add</a></li>
  </ul>
</menu>

A sidebar menu with a Users group and List current.

Paging

Paging steps through a sequence of pages: numbered links with Prev and Next at the ends. The current page is marked, and the disabled ends are plain text rather than links so there is nothing to click past the sequence.

It is a nav with class="paging" holding a elements for the pages; the current one takes aria-current="page", and a span stands in for any end that is unavailable.

<nav class="paging" aria-label="Pagination">
  <span>Prev</span>
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">3</a>
  <span>Next</span>
</nav>

A pagination nav with page two current and Prev disabled.