Navigation
Breadcrumb
Breadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator.
Composed from Breadcrumb Item states — Default/Hover/Current
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.4.0-beta
Known open questions
- Collapsed breadcrumb ellipsis is not confirmed in Figma — deferred.
Live preview
Hierarchical location trail with current-page semantics.
Standard hierarchy
Long labels
Separators are decorative and hidden from assistive technology. The current page is plain text with aria-current="page".
Purpose
Shows the user's location within a hierarchical structure using an ordered trail of links and a current-page indicator.
Anatomy
Breadcrumb = nav landmark + ordered list + ancestor links + current page text.
Variants and states
default
When to use
Nested views where users may need to move up one or more levels (documentation, settings, product catalogs).
When not to use
Flat navigation, linear step progress (use Stepper), or unrelated cross-section jumps (use Tabs or Top Navigation).
Accessibility
Wrap in nav aria-label="Breadcrumb" with an ordered list. Current page uses aria-current="page" and is not a link. Separators are decorative.
Keyboard behavior
Ancestor links are focusable anchors. Current page is plain text with aria-current="page".
Common mistakes
Making the current page a clickable link. Using Breadcrumb as a progress Stepper.
Properties
Composed trail of labels and hrefs. Optional Home icon with accessible name.
How does Breadcrumb communicate the current page?
The final item renders as text with aria-current="page" and is not a link.
What is the difference between Breadcrumb and Stepper?
Breadcrumb shows location in a hierarchy. Stepper shows progress through a linear process.
Tokens used
semantic/text/secondarysemantic/text/primarysemantic/action/primary
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | — | Trail items with label and optional href. |
| homeLabel | string | "Home" | Accessible name for icon-only Home. |
React example
Copy React example
import { Breadcrumb } from "@/components/ui/Breadcrumb";
export function Example() {
return (
<Breadcrumb
items={[
{ label: "Home", href: "/", home: true },
{ label: "Components", href: "/components" },
{ label: "Breadcrumb" },
]}
/>
);
}