Updated
Breadcrumb
Breadcrumb shows where the current screen sits in a hierarchy, and takes people back up it. It earns its place only in a drill-down deeper than Back can explain.
Updated
Preview
A hierarchy trail of three levels, the last one active. Rare on mobile: use it only when a drill-down runs deeper than Back can explain.
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.
How many levels can a Breadcrumb have?
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.
Five levels measure 668, which 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.
What is a Breadcrumb 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.
Default paints fg/sub-700 and text/sub-700, Active paints fg/strong-950 and text/strong-950, so icon and label always carry the same value.
The chevron stays fg/soft-500 at every level. Text false is the usual first level.
How does Breadcrumb differ on iOS and Material 3?
Neither platform has a breadcrumb. iOS puts the previous screen's title on the back button, and Material 3 uses the up arrow in the top app bar and the system back gesture.
| Appetite UI component | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Breadcrumb, Quantity 2 to 5, item 108 x 20 | No counterpart, the back button carries the previous title | No counterpart, the top app bar has an up arrow | Appetite UI shows the whole path at once. The platforms show one step back and leave the rest to the back gesture |
Each level is 20 tall, well under the 44 minimum touch target on iOS and the 48 on Android from platform/min-touch-target. Keep the drawn item at 20 and extend its hit area to 44 or 48 in code.
In HTML, wrap the trail in a nav named Breadcrumb and mark the last level with aria-current set to page. See Top Bars for the back button the platforms use instead.
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 | 2 |
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 icon tokens, fg/sub-700 and fg/strong-950, resolve to the same primitive as their text counterpart in both modes.
On white, the sub text measures 9.1 to 1 and the active text 19.3 to 1.
The chevron, fg/soft-500, measures 3.26 to 1, above the 3 to 1 asked of a graphic. It carries no meaning of its own, because the level labels and the current page mark already do.
Guidelines
Do
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
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.
A breadcrumb on mobile is worth it only for deep drill-downs. Anywhere else, the back button and the screen title already do the job.