Navigation
Breadcrumbs
One typed list in, correct landmark, ordered-list and current-page semantics out.Breadcrumbs at a glance
Route hierarchy needs consistent semantics that consumers should not rewire by hand for every page.
- Data, not router magicThe component never inspects the route: hierarchy and current state are values you pass in.
- Lossless overflowNarrow widths scroll or wrap — middle crumbs are never hidden from the accessibility tree.
- One semantic per crumbLink, current text, or disabled text: current and disabled are never links with blocked clicks.
A quick look
A live component shows the default contract before the detailed specification.
Start with the trail
Pass items root-first; the last non-disabled crumb becomes current automatically.
Preserve intent
Mark current explicitly when the page is not the deepest crumb in the list.