Done
Components
Breadcrumb.
A breadcrumb shows where the current page sits in the hierarchy, and lets people move back up it. It earns its space when someone arrives deep in the product — from a link, a search result or a notification — and needs to know where they are. It supplements the sidenav; it never replaces it.
Levels
The trail always starts at the root and ends on the current page, which is not a link. Breadcrumbs show the hierarchy, never the route someone took to get there — that is what the browser's Back button is for.
Levels = 2
Levels = 3
Levels = 5
States
Anatomy
Do & don't
Accessibility
Props (React)
type BreadcrumbProps = {
items: BreadcrumbItem[]; // root first, current page last
maxItems?: number; // proposed — collapses the middle to an ellipsis
label?: string; // aria-label, defaults to "Breadcrumb"
};
type BreadcrumbItem = {
label: string; // the page title, not the URL segment
href?: string; // omitted on the last item, which renders as text
icon?: IconName; // root item only
};