Breadcrumb
A trail of links from the top of a site down to the current page. It tells people where they are and gives them a one-click way back up.
Preview
When to use
- In products and docs with three or more levels of hierarchy.
- Above a page title, where people land from search and need to know the context.
Reach for something else
- For a flat site of one or two levels: the page title and main navigation already say where you are.
- For the steps of a flow: that is a Dot Stepper or a stepper, not a breadcrumb.
Anatomy
- 1
Trail
A list of links, left to right, from the root to the current page.
- 2
Link
Secondary text colour; darkens and underlines on hover.
- 3
Separator
A slash, a chevron or a dot between items. Decorative.
- 4
Ellipsis
Replaces the middle of a long trail; opens the hidden levels when pressed.
- 5
Current page
The last item, in the primary text colour, not a link.
States
Default
Every level visible.
Collapsed
The root and the last two levels show; the middle folds into an ellipsis.
Expanded
After the ellipsis is pressed, the full trail shows and wraps if it needs to.
Hover
The link darkens and underlines.
Focus
A ring around the link.
Accessibility
- The trail is a <nav> with aria-label="Breadcrumb", holding an ordered list.
- The current page carries aria-current="page".
- Separators are drawn in CSS or marked aria-hidden, so screen readers do not read out slashes.
- The ellipsis is a <button> with an aria-label such as "Show hidden levels".
Source
The Breadcrumb is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block