Components

Breadcrumb

Hierarchical navigation trail showing the user's current location within a multi-level structure. The last item always represents the current page and is never a link.

Examples

2 levels
3 levels
Cedar Ops
4 levels

Anatomy

navLandmark element with aria-label="Breadcrumb". Screen readers announce this as navigation.
olOrdered list — order matters semantically (root → current).
Link itemsAncestor pages. Color: text/subtle, hover: text/base. Standard anchor tag with href.
Current itemLast item. Not a link. aria-current="page", color: text/base, font-weight: 500.
SeparatorSVG chevron ›, aria-hidden. Color: border/subtle. Never a text character — screen readers skip it.

Usage guidance

DoInclude the root/home as the first item when the full path adds useful context.
DoMatch breadcrumb labels exactly to the page titles they link to.
DoPlace the breadcrumb above the page title, below the top navigation.
Don'tMake the current page a link — it's already the active page.
Don'tUse a breadcrumb on flat, single-level sites — it adds noise without benefit.
Don'tTruncate items in v1. If the path is too long, the page structure needs rethinking.

Tokens used

text/subtleAncestor link color
text/baseAncestor link hover + current page label
border/subtleSeparator chevron color
font/baseTypeface (Inter)
body/smFont size (16px)
Figma: In progressReact: v1Overflow truncation: v2