Breadcrumbs
One click back up the hierarchy. A compound Breadcrumbs with type, divider, and maxVisibleItems, ellipsis folding, and an AccountItem workspace switcher.
Breadcrumbs
One click back up the hierarchy. A compound Breadcrumbs with type, divider, and maxVisibleItems, ellipsis folding, and an AccountItem workspace switcher.
Demo
Change the props and copy the result. Type, divider, and maxVisibleItems are real props; the snippet emits the crumbs.
Two props, set once, delivered by context
type and divider live on the container and reach every crumb through React context. Breadcrumbs.Item accepts both and then overwrites them from that context, so setting them per crumb type-checks and does nothing.Contextual demo
A trail is chrome. It only reads correctly with a page underneath and an app frame around it, so it gets a whole screen.
The family
Three exports: the container, the crumb, and the account crumb.
| Component | Description | Import from |
|---|---|---|
| Breadcrumbs | The nav landmark and the list: owns type, divider, and maxVisibleItems, and hands the first two to its items through context. | @/components/application/breadcrumbs/breadcrumbs |
| Breadcrumbs.Item | One crumb: a link with an optional leading icon, or an avatar in a ring when avatarSrc is set. The last one is styled as the current page. | @/components/application/breadcrumbs/breadcrumb-item |
| Breadcrumbs.AccountItem | A workspace or account crumb: an avatar, a name, and a chevron opening a single-select dropdown of accounts; below md, the ringed avatar alone. | @/components/application/breadcrumbs/breadcrumb-account-item |
Built from
Nine pieces make up the trail and its account switcher; four have their own docs page.
Component | Where it’s used here |
|---|---|
| Avatar | The portrait in an avatarSrc crumb and in the account crumb, at size xs. |
| Dropdown | The account switcher menu and its popover. |
| RadioButtonBase | The selected marker on each row of that menu. |
| @untitledui/icons | ChevronRight, SlashDivider, and ChevronSelectorVertical. |
Types
Three type values, each with both dividers: six live rows. The sheet’s twelve symbols repeat these at two breakpoints.
text-line stretches; the other two do not
text-line are drawn by an absolutely positioned after pseudo-element on the list, so they run the width of the list rather than the width of the container. In a page they usually want a wrapper that fills the column.Dividers
Both glyphs, side by side at the same type, since the difference is easy to describe and hard to picture.
Collapsing a deep trail
maxVisibleItems folds a long trail’s middle behind an ellipsis — a real control: select it and the trail expands.
Expanding resets when the crumbs change
The account crumb
A workspace crumb in both shapes: a plain avatar crumb that navigates, and the dropdown that switches.
Two shapes, one look from 768px up
Breadcrumbs.Item avatarSrc: the same avatar in the same ring, as a link with no menu. The second is Breadcrumbs.AccountItem, which adds the switcher chevron and the dropdown. Below 768px, since the 2026-08-22 edit, the second drops its visible label and the chevron and is the ringed avatar alone, while the first keeps its label at every width: measured at 390×844, the trigger is 28px wide rather than 108.7px. Use the first when there is nothing to switch to.States
The crumb has three: default, hover, and focus. Current is not set — it is what the last crumb in the list gets.
Truncation is the current crumb’s, and the account crumb’s
whitespace-nowrap with nothing clipping it, so a long ancestor label pushes the row wider instead. Since 2026-08-22 the account crumb’s name truncates as well, on the trigger and on each menu row, as the sheet ellipsizes a long workspace name.There is no disabled crumb
href off does not make one: only the current crumb is disabled, by React Aria, and a non-final crumb with no href stays focusable and is still announced as a link, going nowhere. A crumb you do not want followed is a crumb you leave out.