Breadcrumb
A trail of links that shows where a page sits and leads back to the pages above it.
Basic
Each BreadcrumbItem with an href renders as a ghost link. Leave href off the last crumb to render the current page as plain text with aria-current="page". A chevron separates the crumbs.
Breadcrumb grows to fill its row by default. Add flex-initial when the trail should only take the width it needs, as in most page headers.
With icons
startIcon adds a glyph before the label.
Long labels
Crumbs keep their natural width until the trail runs out of room. Then they share the remaining width, so every crumb keeps a readable part of its label instead of one crumb disappearing. A truncated crumb shows its full label in a tooltip on hover.
Accessories
Each direct child of Breadcrumb becomes one list item, and every item after the first starts with a chevron. To place controls beside a crumb without a chevron between them, group the crumb and a BreadcrumbAccessory in one fragment.
Custom crumb
BreadcrumbSlot gives custom content, such as a switcher menu or a loading skeleton, the same sizing as a BreadcrumbItem, so it shrinks and truncates with the rest of the trail.
Breadcrumb Properties
Crumbs. Each direct child becomes one list item, preceded by a chevron after the first.
Accessible name of the navigation landmark. Ignored when aria-labelledby is set.
Default: Breadcrumb
Id of the element that names the navigation landmark.
Additional classes for every chevron separator.
Additional classes for the nav element. Other nav props are passed through.
BreadcrumbItem Properties
Full label. Truncates with a tooltip when the trail runs out of room.
Destination of the crumb. Omit it for the current page, which renders as plain text.
Icon name, icon descriptor, or node shown before the label.
Sets aria-current="page" on a crumb that still has an href.
Default: false
Disables the link.
Default: false
Click handler for the link, for example to intercept navigation. Other handlers go to the outer element.
Ref to the outer element, so the crumb can anchor a popover or context menu.
Registers the crumb as a drop target. The consumer owns the drag-and-drop context.
Highlights the crumb while a dragged item hovers over it.
Default: false
Turns off pointer events while a drag is in progress.
Default: false
Additional classes for the outer element. Other div props are passed through.
BreadcrumbSlot Properties
Custom crumb content, sized to fill the slot.
BreadcrumbAccessory Properties
Buttons or menus shown beside a crumb, without a chevron before them.