Components
Breadcrumb
A compact path control before the page title: a back button and a menu of the pages above the current one.
Playground
Settings
Figma variant
🕹 State=Default | Hover | Focus | Active
Back Button=TrueStates
The round toggle is surface/level-4 at rest, surface/level-1 on hover and focus (with the focus ring), and primary with an up arrow while the menu is open. The menu is a Dropdown of Small Cells; the current page is checked.
Tokens
| Part | Token |
|---|---|
| Pill | --color-surface-level-2, --radius-full, 32px |
| Toggle (rest / hover / open) | --color-surface-level-4 / --color-surface-level-1 / --color-primary |
| Arrow (rest / open) | --color-primary / --color-on-primary |
| Menu | Dropdown, Cell Small |
Notes from Figma
- This is not a classic slash-separated breadcrumb; the path lives in the menu.
- The menu sits 16px in from the left (a Spacing instance) and 4px under the pill.
- The Size property on the page has no variants.
- The arrows are “Icon/arrow down” and “Icon/arrow up”; code uses arrow-bottom and arrow-top.
Figma to code
| Figma | React |
|---|---|
| 🕹 State = Default / Hover / Focus | :hover / :focus-visible |
| 🕹 State = Active | menu open |
| Back Button | onBack |
| Dropdown items | items |