Navigation
Breadcrumb Item
Breadcrumb Item is a single link in a breadcrumb trail showing the user's location within a hierarchy.
State (Default/Hover/Current) — 3 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Breadcrumb Item is a single link in a breadcrumb trail showing the user's location within a hierarchy.
When to use
Composed with Icon/CaretRight separators to show path depth in a nested structure.
When not to use
Flat, non-hierarchical navigation.
Accessibility
Wrap in nav aria-label="Breadcrumb"; final crumb gets aria-current="page" and should not be a link.
Common mistakes
Making the last (current-page) crumb a clickable link.
Properties
State as variants. Label (text).
Tokens used
semantic/text/secondarysemantic/text/primarysemantic/action/primary