Styling contract
Breadcrumb primitives expose stable slot attributes so teams can style either pure headless markup or wrapper components with the same selectors.
Primitive slot selectors
[data-slot="breadcrumb"]for the root navigation container.[data-slot="breadcrumb-list"]for the ordered list track.[data-slot="breadcrumb-item"]for each item wrapper.[data-slot="breadcrumb-link"]for linked ancestor segments.[data-slot="breadcrumb-separator"]for decorative separators.
Wrapper state hooks
[data-current="true"]on the resolved current page segment.[data-disabled="true"]when an item is presentational but non-interactive.[data-collapsed="true"]on the rendered ellipsis marker in collapsed mode.[data-focused="true"]and[data-focus-visible="true"]during focus transitions.
Practical guidance
- Keep separators decorative (
aria-hidden) and non-focusable. - Use stronger contrast for the current segment than ancestor links.
- In collapsed mode, preserve first and current items for orientation.
- Avoid wrapping every segment to new lines unless your IA requires it on mobile.