role navigation
Breadcrumb draft v0.1.0
Shows where the current page sits in a hierarchy, with a link to each level above it.
A breadcrumb lists the pages above the current one, from the top of the hierarchy down, each as a link, and ends with the current page, which is not a link. It tells people where they are and lets them go up one or several levels in one activation. It is a navigation landmark of its own, separate from the main navigation.
Decisions
From decisions in packages/components/specs/components/breadcrumb.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.
Anatomy
-
A breadcrumb is a navigation landmark named Breadcrumb holding an ordered list; the last item is the current page, marked current and not linked; a chevron separates the levels.
landmark-and-list· 2026-10-03 · v0.1.0APG: Breadcrumb pattern, roles, states and propertiesWAI-ARIA 1.2: aria-current (page)
Color
-
Links are underlined in the secondary text color and turn primary on hover; the current page is primary text without underline; separators take the tertiary icon color.
link-colors· 2026-10-03 · v0.1.0breadcrumb.link.color.*breadcrumb.separator.color
Size
-
Two sizes: small (12 px text, 16 px separator) and medium (14 px, 20 px, the default); links are at least 24 px high, 4 px apart from their separators.
sizes· 2026-10-03 · v0.1.0breadcrumb.link.typography.*breadcrumb.separator.size.*breadcrumb.link.min-heightbreadcrumb.container.gap