Navigation on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

Five components for moving around a site.

Page	Class	Purpose
Nav	`.nav`	The base navigation list
Nav title	`.nav-title`	A label above a group of links
Skip links	`.nav-accessibility`	Skip navigation for keyboard and assistive technology
Breadcrumb	`.breadcrumb-wrapper`	The breadcrumb trail
Pagination	`.pagination`	Page navigation

Two of them take the class on the wrapper

.breadcrumb-wrapper goes on the <nav>, not on the <ol> inside it. .nav-accessibility goes on the list itself, but only alongside .nav. Neither is guessable from the name, so check the page before writing the markup.

Nav

Mon, 01 Jan 0001 00:00:00 +0000

The base navigation list, vertical by default.

<ul class="nav">
 <li><a href="/">Home</a></li>
 <li><a href="/about">About</a></li>
</ul>

Works on ul or ol.

Direction is set by context, not by a modifier

There is no .nav-horizontal. The direction comes from a token:

flex-direction: var(--nav-direction, column);

so a header lays its own navigation out horizontally by setting --nav-direction: row on it, or flex-direction directly. That keeps the component free of layout variants that would only ever be used in one place, and it means the same list is a column in a drawer and a row in a header without a class change.

Nav title

Mon, 01 Jan 0001 00:00:00 +0000

A title within a navigation block, for labelling a group of links.

<nav aria-labelledby="docs-nav">
 <p class="nav-title" id="docs-nav">Documentation</p>
 <ul class="nav">
 <li><a href="/docs/install">Installation</a></li>
 <li><a href="/docs/usage">Usage</a></li>
 </ul>
</nav>

It is a leaf component with no children and no variants:

.nav-title {
 font-size: var(--nav-title-font-size);
 font-weight: var(--nav-title-font-weight);
 margin-block: var(--nav-title-margin-block, 0);
 padding-block: var(--nav-title-padding-block);
 padding-inline: var(--nav-title-padding-inline);
}

It is a sibling of the list, not an item in it

Putting it inside the <ul> as an <li> would make it a list item that screen readers count and announce as one, and .nav would style it as a navigation entry. Keep it outside.

Skip links

Mon, 01 Jan 0001 00:00:00 +0000

Skip links, for keyboard and assistive technology users.

<ul class="nav nav-accessibility">
 <li><a href="#main">Skip to content</a></li>
 <li><a href="#navigation">Skip to navigation</a></li>
 <li><a href="#footer">Skip to footer</a></li>
</ul>

Three things matter here, and getting any of them wrong defeats the purpose.

It must be the first focusable element in `<body>`

A skip link that comes after the navigation it skips is useless. It goes before the header, before any cookie banner, before anything else that can take focus.

Breadcrumb

Mon, 01 Jan 0001 00:00:00 +0000

The breadcrumb trail. The class goes on the wrapper, not on the list.

<nav class="breadcrumb-wrapper" aria-label="Breadcrumb">
 <ol>
 <li><a href="/">Home</a></li>
 <li><a href="/docs">Docs</a></li>
 <li aria-current="page">Navigation</li>
 </ol>
</nav>

.breadcrumb-wrapper styles the ol and the li inside it by element, so there is no class to put on either. The name says wrapper for that reason.

The separator

Drawn on li::before from a token, with the first item’s suppressed:

li::before { content: var(--breadcrumb-separator); color: var(--breadcrumb-color-separator); }
li:first-child::before { display: none; }

--breadcrumb-separator defaults to "/" and takes any content value, so a chevron or an arrow is a token change. It needs the quotes, since it is dropped into content as is.

Pagination

Mon, 01 Jan 0001 00:00:00 +0000

A page navigation list.

<nav aria-label="Pagination">
 <ul class="pagination">
 <li class="disabled"><a class="first">First</a></li>
 <li><a class="previous" href="?page=1">Previous</a></li>
 <li class="item active"><a href="?page=2">2</a></li>
 <li class="item item-adjacent"><a href="?page=3">3</a></li>
 <li><a class="next" href="?page=3">Next</a></li>
 <li><a class="last" href="?page=9">Last</a></li>
 </ul>
</nav>

Class	On	Role
`.first`, `.previous`, `.next`, `.last`	the `a`	Navigation controls
`.item`	the `li`	A page number
`.item-adjacent`	the `li`	A page number next to the current one
`.active`	the `li`	The current page
`.disabled`	the `li`	An unavailable control

.active and .disabled are both read as ancestors of the link (.active a, .disabled a), so putting either on the li is what the rules expect.

Navigation on Socle

Overview

Two of them take the class on the wrapper

Nav

Direction is set by context, not by a modifier

Nav title

It is a sibling of the list, not an item in it

Skip links

It must be the first focusable element in <body>

Breadcrumb

The separator

Pagination

It must be the first focusable element in `<body>`