Breadcrumb
The trail back to where you came from. Two published components, thirteen variants, and a matrix with one cell deliberately left empty.
A matrix with a hole in it
Four variants across three states would be twelve. Link Current has no Hover, because it is the page you are already on - there is nowhere for the pointer to take you. Leaving the cell empty is more honest than drawing a state nothing can reach.
| Variant | Default | Hover | Focus |
|---|---|---|---|
| Link | Breadcrumb | Breadcrumb | Breadcrumb |
| Link Current | Breadcrumb | not drawn | Breadcrumb |
| Dropdown | Breadcrumb | Breadcrumb | Breadcrumb |
| Ellipsis |
One trail, two breakpoints
Breadcrumb has a single axis, Breakpoint, and the only thing that changes between md and sm is the gap: spacing.2-5 becomes spacing.1-5, ten pixels down to six. Same six items, same five separators. It is the smallest axis in the kit and it earns its place, because a trail that stays at ten on a phone wraps.
A border, not a ring
Badge and Accordion put a 2px ring outside the shape. Breadcrumb Item does the opposite: a 1px inner border at half opacity, on a 2px radius, drawn inside the item's own box.
The reason is spacing. Breadcrumb items sit 6 to 10px apart, and an outer ring at that distance would touch the separator beside it. An inner border costs no space at all, so the trail keeps its rhythm whether or not something is focused.
Every variant that can be clicked - Link, Dropdown and Ellipsis - goes from base.muted-foreground to base.foreground on hover, label and icon together. Link Current is already at foreground and has no hover at all. Nothing else changes: no fill, no underline, no shift. The trail is quiet until you point at it.
Two components, thirteen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Breadcrumb
Because it is the page you are on. Hover promises that clicking will take you somewhere, and here it would take you nowhere. The cell is left out of the matrix rather than filled with a state that is unreachable - eleven variants instead of twelve.
Spacing. Items sit six to ten pixels apart, and a 2px outer ring at that distance collides with the separator next to it. A 1px inner border at half opacity costs no space, so the trail keeps its rhythm with something focused in it.
Collapsing the middle of a long trail. It is a 36px square hit area holding a 15px three-dot mark - much larger than it looks, because it is the one item in the row you are meant to click on a phone. Its dots darken on hover like a link does.
Because that is the only thing that needs to change. md sits at spacing.2-5 and sm at spacing.1-5, ten pixels down to six. Nothing else about a breadcrumb is responsive - it is one row of text - and an axis that changed more would be inventing a difference that is not there.