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.
A bar
<nav aria-label="Site">
<a href="/">brand</a>
<ul><li><a href="/" aria-current="page">Home</a></li> … </ul>
</nav>Dropdown — click
A nested ul in a details is a click
menu; a shared name makes a bar's menus mutually exclusive — no JS.
Dropdown — hover & focus
A bare nested ul opens on hover or keyboard focus
(:focus-within); the parent stays a real link for touch.
Paging
<nav class="paging" aria-label="Pagination">
<a href="?page=1">1</a>
<a href="?page=2" aria-current="page">2</a> …
</nav>