Breadcrumbs

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

Specimen

Guidelines

Code

Demo

hero

Account switcher

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