Components · Navigation

Breadcrumbs & pagination

Where-am-I and where-to-next. A breadcrumb is a <nav aria-label="Breadcrumb"> over an ordered list; the last crumb is the current page — plain text with aria-current="page", not a link. A pager chunks a long roster: prev / numbered pages with a collapsed run / next, the current page filled accent.

Breadcrumb trail

Downtown Rescue pinned to :hover. Second trail collapses the middle to a disclosure (labelled for AT) when the path is deep. Chevron separators are aria-hidden.

Pagination · numbered pager
Showing 21–40 of 231 volunteers
Showing 1–20 of 231 volunteers

Current page filled accent on --on-accent with aria-current="page". Page 3 pinned to :hover. On the first page, Prev is disabled (dimmed, not clickable).

Source · portal list surfaces (roster, events) + globals.css tokens. Breadcrumb = <nav aria-label="Breadcrumb">/<ol> with the current crumb as aria-current="page" text; pager mirrors the same active-emphasis as the sidebar (accent fill + aria-current), with a collapsed run and a disabled edge.