Breadcrumbs

One click back up the hierarchy. A compound Breadcrumbs with type, divider, and maxVisibleItems, ellipsis folding, and an AccountItem workspace switcher.

Demo

hero
type
divider
Trail length
maxVisibleItems
import { Home01 } from "@untitledui/icons"; import { Breadcrumbs } from "@/components/application/breadcrumbs/breadcrumbs"; <Breadcrumbs> <Breadcrumbs.Item href="#" icon={Home01} /> <Breadcrumbs.Item href="#">Projects</Breadcrumbs.Item> <Breadcrumbs.Item href="#">Marketing site redesign</Breadcrumbs.Item> <Breadcrumbs.Item href="#">Assets</Breadcrumbs.Item> <Breadcrumbs.Item href="#">Brand</Breadcrumbs.Item> <Breadcrumbs.Item>Logos</Breadcrumbs.Item> </Breadcrumbs>

In context

in-context
View in a page

Family

family
Breadcrumbs
Breadcrumbs.Item
Breadcrumbs.AccountItem

Types

cells

Three types across both dividers.

text, chevron divider
text, slash divider
text-line, chevron divider
text-line, slash divider
button, chevron divider
button, slash divider

Layouts

cells

text-line

text-line, the list's own width
text-line, in a wrapper that fills the column

Behaviour

cells

Collapsing a deep trail

six levels, maxVisibleItems 4
six levels, maxVisibleItems 3
six levels, maxVisibleItems 0

The account crumb

AccountItem, chevron divider
AccountItem, slash divider

Content

cells
a long current label in a 220px column truncates
a long ancestor label pushes the row wider

States

cells
hover and focus, live
button type, hover and current fill the pill
current, the last crumb, no divider after it