Nav and breadcrumb

Each list in a nav is a group. The first sits at the start and the last at the end. Links get a padded hit area, and aria-current marks the current page. Only the nav's own lists form the row, so a list nested in an item keeps its layout, and one class on the nav overrides it.

Collapsing menu

Make the link list a popover and add a .nav-toggle button for it. The list sits in the nav while there is room, and opens from the button below a 48rem wide nav. For a top bar with a full width panel on phones, use the navbar.

Vertical menu

Inside aside the lists stack, for a sidebar menu.

Breadcrumb

nav.breadcrumb puts a divider between items. Mark the last link with aria-current="page". The divider flips in right to left text.

Dropdown

Inside a nav, a button without a class that opens a dropdown looks like a link.

Variables