Navigation

breadcrumbs · pagination · steps

Wayfinding for app shells and flows. Tabs live with the guide's own components; these are the remaining patterns — where you are, what comes next, and how to move between pages.

Breadcrumb

Separators are aria-hidden; the current page is text, not a link.

Pagination

The current page uses the accent fill. Disabled ends are dimmed and marked aria-disabled rather than removed, so the control does not shift.

Steps

  1. ConnectPoint at a source
  2. DeriveSeed to tokens
  3. ShipExport everywhere
  4. VerifyCheck the result

Completed steps mark with a tick in the success tone; the current step takes the accent. Order is carried by the list, not by colour.

Rules

One current location per surface. Tabs, breadcrumbs and steps all indicate position — do not show two of them pointing at different places.

Active state is a shape, not an underline. A visible tab or filled pager cell. No hover underline competing with the selected state.

Arrow keys move between tabs. See Tabs. Steps and breadcrumbs are links and follow normal tab order.

Compact controls. Pagers run at 32px with --compact-control-radius.