Breadcrumb
A secondary trail that shows where a page sits in the hierarchy and lets the user step back up to any ancestor, one level at a time.
Location-based: the same trail for everyone, home down to the current page.
Truncated: interior levels collapse behind an ellipsis instead of wrapping. Click the ellipsis.
Mobile: the whole trail gives way to one link up a level, with a comfortable tap target.
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/boots">Boots</a></li>
<li><span aria-current="page">
Trail Runner GTX
</span></li>
</ol>
</nav>Behavior
Keyboard
- Tab
- Moves through the ancestor links in order. The current-page item is plain text, not a link, so it is skipped. Enter activates the focused link, as with any link.
Parts
Navigation landmark
A nav element labeled via aria-label or aria-labelledby (commonly aria-label="Breadcrumb"). The label makes the trail a distinct landmark a screen reader user can jump to, and distinguishes it from the page's primary nav landmark.
Ordered list
An ordered list (ol) holds the trail, one li per level, because the sequence carries meaning: each item is a parent of the next. The ordering is part of the semantics, which is why an ol is correct and a bare row of links is not.
Ancestor links
Each level above the current page is a link to that ancestor, in order from the root. Only real, navigable pages belong here: skip grouping labels that have no page of their own, and link the home or root as the first item.
Current-page item
The final item is the page you are on. It carries aria-current="page" and is normally not a link, since linking the page to itself adds nothing; it is styled to read as distinct from the linked ancestors.
Separators
The visual dividers between items (a chevron, slash, or arrow). They are decorative: render them with a CSS pseudo-element or mark them aria-hidden so a screen reader does not announce "greater-than" between every link. They are never part of the link text.
States
Hover and focus
Each ancestor is an ordinary link: it shows a hover affordance and a clearly visible focus ring, and activates on click or Enter. Nothing is animated or delayed; the trail is static text that happens to be linked. The current-page item, being plain text, has no hover or focus state.
Current page is inert
The last item does not respond to clicks and is not in the tab order, because it is not a link. It is marked aria-current="page" and styled to look settled rather than interactive, signalling the end of the trail.
Responsive truncation
On narrow screens a long trail should not wrap to several lines, which hides the structure it is meant to show. Shorten it to the last level or two, or collapse the middle with an overflow control, keeping the home or root and the current location visible.
Back-to-parent on mobile
Where space is tight, some systems replace the full trail on small screens with a single "Back to [parent]" link to the immediate ancestor. It costs the full hierarchy but keeps the most common move, going up one level, with a comfortable tap target.
Overflow collapse
Very deep trails can collapse interior levels behind an ellipsis that expands the hidden items, often as a small menu of the skipped ancestors. Carbon's guidance keeps the first and the last two items visible so orientation survives, and the expanded items remain real links.
References
Use it
Figma
A breadcrumb component with a current-page variant
- Build a Crumb component with a State property: Link and Current. The Link variant is an Auto Layout frame of accent-colored text; the Current variant is muted, non-underlined text.
- Make a separate Separator component (a small chevron or slash) so it can sit between crumbs and be swapped or hidden independently.
- Assemble the trail as a horizontal Auto Layout row alternating Crumb and Separator instances, with the last Crumb set to the Current state.
- Annotate that in code the row is a nav[aria-label=Breadcrumb] wrapping an ol, the Current crumb carries aria-current=page and is not a link, and the separators are decorative.
Keep the separator as its own component, not baked into the crumb, so the developer note about decorative aria-hidden separators maps cleanly to the design.
A responsive truncated trail
- Lay out the full desktop trail with Auto Layout, then duplicate the frame for a mobile width.
- In the mobile version, replace the interior crumbs with an ellipsis crumb, keeping the home or root and the current page visible.
- Optionally attach a small menu (a Dropdown component) to the ellipsis listing the hidden ancestors, so the structure is recoverable.
- Caption the two frames so the team sees the truncation rule: collapse the middle, never wrap to a second line.
If you prefer the back-to-parent approach, swap the whole mobile trail for a single "Back to [parent]" link component and note the trade-off on the frame.
Document the breadcrumb decision rules
- Make a labeled example showing a location-based trail next to a crossed-out history-based one, captioned "hierarchy, not history".
- Add a second pair: a deep content page with a breadcrumb (yes) beside a checkout step with one (no), captioned "not in transactional journeys".
- Note that the trail is secondary navigation: keep it small and above the content, never standing in for the main menu.
- Add the one-line accessibility rule: nav landmark with a label, ordered list, aria-current on a non-linked current page, decorative separators.
Keep this note in the team library so the location-versus-history and where-to-use questions are settled once, not re-argued per page.
Accessibility
A breadcrumb is a labeled navigation landmark wrapping an ordered list of links. There is no special keyboard model: the ancestors are plain links you reach with Tab, and the current page is inert text marked aria-current="page". The two things that make it accessible are the landmark label, so a screen reader user can find and skip the trail, and decorative separators, so the trail reads as a clean list of page names rather than a string punctuated by symbols.
- The current page is not a link and is not in the tab order; ancestor links are reached with Tab in order.
- Give links a clearly visible focus indicator and enough contrast against the background, including the muted current-page text.
- Keep the trail off multiple lines: truncate or collapse on small screens rather than wrapping, which destroys the sense of structure.
- Pair the visual trail with schema.org BreadcrumbList structured data so the hierarchy is exposed to search engines as well as users.
Research notes & sources
APG Breadcrumb: nav landmark with aria-label, an ordered list of links, aria-current=page on the last item, decorative separators
- Breadcrumb Pattern (ARIA Authoring Practices Guide)W3C WAI
- Breadcrumb Example (ARIA Authoring Practices Guide)W3C WAI
- Breadcrumb navigation (CSS Layout Cookbook)MDN Web Docs
- Breadcrumbs: 11 Design Guidelines for Desktop and MobileNielsen Norman Group
- BreadcrumbsGOV.UK Design System
- BreadcrumbsNHS digital service manual
- BreadcrumbCarbon Design System (IBM)
- Breadcrumb (BreadcrumbList) structured dataGoogle Search Central