Skip to content
Components
/
Breadcrumb
Dark

Breadcrumb

Breadcrumb shows where the current screen sits in a hierarchy, and takes people back up it.

Preview

A hierarchy trail. Three levels, the last one active. Rare on mobile by the file's own description, worth it only when a drill-down runs deeper than Back can explain.

Breadcrumb, Quantity 3
388 x 20, gap 8, item gap 6
BreadcrumbBreadcrumbBreadcrumb

The last item is the page you are on, so it takes the strong tokens and stops being a link. Everything before it stays sub.

Quantity

Two to five levels. The track hugs, stays 20 tall and adds 140 for every level past the first: eight of gap, the sixteen wide chevron, eight again, then the 108 item.

Quantity 2, 3, 4, 5, top to bottom
248, 388, 528, 668 wide, 20 tall
BreadcrumbBreadcrumb
BreadcrumbBreadcrumbBreadcrumb
BreadcrumbBreadcrumbBreadcrumbBreadcrumb
BreadcrumbBreadcrumbBreadcrumbBreadcrumbBreadcrumb

668 does not fit a 390 screen, or this column. The track scrolls in place instead of wrapping, because a breadcrumb on two lines stops reading as one line of descent.

Item

The building block behind every level. One state axis and two booleans, so a level can be an icon and a label, a label alone, or an icon alone.

State Default, State Active, text only, icon only
108 x 20, gap 6, icon 20 box on a 15 vector
Breadcrumb
Breadcrumb
Breadcrumb

Default paints fg/sub-700 and text/sub-700, Active paints fg/strong-950 and text/strong-950. Icon and label always carry the same value, so one rule moves both. The chevron stays fg/soft-500 at every level. Text false is the usual first level.

Properties

One axis on the published component. The rest sit on the item inside it, a building block not meant for direct use.

Property
Type
Default
Quantity
2 | 3 | 4 | 5
5
State
Default | Active, on the item
Default
Icon
Boolean, on the item
true
Text
Boolean, on the item
true
Edit Text
Text, on the item
Breadcrumb

Breadcrumb ships 4 variants, one per quantity. The item ships 2, one per state, and is composed into all four, so a change there reaches every level of every trail.

Tokens

Three values and nothing else. No fill, no border, no radius anywhere in the component.

Token
Light
Dark
Applied to
text/sub-700
#48484A
#C7C7CC
Every level that is not the current one, label and icon
text/strong-950
#0E0E0F
#FFFFFF
The active level, label and icon
fg/soft-500
#8E8E93
#AEAEB2
The chevron between levels

The file names the icon halves separately, fg/sub-700 and fg/strong-950, and both resolve to the same primitive as their text counterpart in both modes.

Guidelines

Do
ReportsQ3 revenue

Save it for a drill-down deep enough that Back stops answering the question. Drop the label on the root and let the icon carry it.

Don't
SettingsProfile

Two levels do not need a trail. One step back is a Back button, and a breadcrumb there spends a whole row saying what the header already said.

The component's own description is blunt about it: rare on mobile, only for deep drill-downs.