---
title: Breadcrumb
description: Breadcrumb shows where a screen sits in a hierarchy and takes people back up it, from two to five levels. Appetite UI component for Figma, rare on mobile.
group: Components
source: https://www.appetiteui.com/docs/breadcrumb
dateModified: 2026-10-03
---

# Breadcrumb

Updated: October 3, 2026.

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.

## 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.

Specimen: Breadcrumb, Quantity 3. 388 x 20, gap 8, item gap 6.

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.

Specimen: Quantity 2, 3, 4, 5, top to bottom. 248, 388, 528, 668 wide, 20 tall.

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.

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

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](https://www.appetiteui.com/docs/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.

- Avoid: 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.