Navigation

Primary navigation

The live masthead is the specimen

The primary navigation, responsive disclosure, and current-route state already appear above this page. Do not reproduce the masthead inside content. Use the patterns below for navigation that has a narrower scope.

Breadcrumbs

Show hierarchy, not browsing history

Use breadcrumbs when a route sits inside a meaningful hierarchy. Keep labels short; the current page is the final, non-linked item.

items

An ordered hierarchy of labels with optional links. The final item receives aria-current="page" and is rendered as text.

label

The navigation landmark label. It defaults to Breadcrumb.

Tabs

Switch one local view

Tabs reveal peer panels without changing routes. Use links instead when each label has its own URL or must support opening in a new tab.

Selection

Clicking a tab selects its associated panel. Only the selected tab remains in the sequential tab order.

Keyboard

Left and right arrows wrap through tabs. Home and End select the first and last tab.

Semantics

The component connects every tab and tabpanel with stable IDs, selection state, and accessible names.

Pagination

Move through a bounded collection

Pagination belongs below a collection whose pages have stable URLs. Keep Previous and Next visible at the boundaries and mark the current numbered page.

pages

Ordered page numbers and their canonical URLs.

currentPage

Matches one numbered item and applies aria-current="page".

Boundaries

Omit previousHref or nextHref to expose a visible disabled label at the start or end of the collection.

Grouped link list

Index related documents

Use a named section and semantic list for each document family. This pattern suits the specification index; it is not a substitute for primary navigation.

.link-list

A markerless semantic list inside a clearly named document group.

.link-list-item

One focused destination. The link text must make sense outside the group.