Navigation
Breadcrumbs
One typed list in, correct landmark, ordered-list and current-page semantics out.Anatomy
The public structure is divided into four responsibilities.
- 1
Nav landmark
A labelled nav that names the trail for assistive technology.
- 2
Ordered list
An ol conveying position and count; overflow behavior lives here.
- 3
Item leaf
Chooses link, current or disabled and delegates links to the canonical control.
- 4
Divider leaf
Decorative separator between crumbs, hidden from assistive technology.
Interactive configuration
Switch overflow behavior and try a long trail or a text divider.
Dividers are configurable
Icon-like values render through MIcon; anything else, like /, renders as text.
No ellipsis collapse
Collapse is excluded until it ships a real disclosure, menu, keyboard flow and focus return.
States
States preserve accessibility and expected feedback.
Actionable crumb
Enabled crumbs with a route reuse the canonical text-link and its state layers.
Current page
Exactly one crumb carries aria-current=page and stays text even when it has a route.
Unavailable
Disabled crumbs render as text with aria-disabled and never enter the tab order.
Constrained width
Scrolling or wrapping keeps every crumb reachable and announced.
In context
A trail with a disabled crumb and an implicit current page.