Breadcrumb
FreeA horizontal trail of links showing the user's current location within the site hierarchy. Each item is a navigable link except the last, which represents the current page. Uses an ordered list inside a <nav> landmark for correct semantics and screen reader announcements.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard breadcrumb with slash or chevron separators between items. | Use on any page more than one level deep in the hierarchy — detail pages, settings sub-pages, nested categories. |
| With Icons | Breadcrumb items paired with small icons for visual context. | Use when categories have recognisable icons that aid scanning — folders, settings, dashboards. |
Usage Guidelines
Wrap in <nav aria-label="Breadcrumb"> for landmark identification.
Use breadcrumbs on the home page — there is no trail to show.
Use an <ol> element — breadcrumbs represent an ordered sequence.
Make the current page item a link — it should be plain text or aria-current.
Mark the last item with aria-current="page" to indicate the current location.
Use breadcrumbs as the sole navigation — they supplement, not replace, primary nav.
Keep labels short — one or two words matching the page title.
Add breadcrumbs to single-level sites with no hierarchy.
Code
<nav class="lex-breadcrumb" aria-label="Breadcrumb">
<ol class="lex-breadcrumb__list">
<li class="lex-breadcrumb__item">
<a href="/" class="lex-breadcrumb__link">Home</a>
<span class="lex-breadcrumb__separator" aria-hidden="true">/</span>
</li>
<li class="lex-breadcrumb__item">
<a href="/products" class="lex-breadcrumb__link">Products</a>
<span class="lex-breadcrumb__separator" aria-hidden="true">/</span>
</li>
<li class="lex-breadcrumb__item">
<span class="lex-breadcrumb__current" aria-current="page">Widget Pro</span>
</li>
</ol>
</nav>.lex-breadcrumb__list {
display: flex;
align-items: center;
gap: var(--lex-space-4);
list-style: none;
padding: 0;
margin: 0;
font-size: var(--lex-font-size-sm);
}
.lex-breadcrumb__link {
color: var(--lex-text-muted);
text-decoration: none;
transition: color 150ms ease;
}
.lex-breadcrumb__link:hover {
color: var(--lex-text-default);
text-decoration: underline;
}
.lex-breadcrumb__current {
color: var(--lex-text-default);
font-weight: 500;
}
.lex-breadcrumb__separator {
color: var(--lex-text-muted);
user-select: none;
}// Using Lexicon CSS classes with React
export function ProductBreadcrumb() {
return (
<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/products">Products</BreadcrumbItem>
<BreadcrumbItem current>Widget Pro</BreadcrumbItem>
</Breadcrumb>
);
}Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-breadcrumb-font-size | — | — | size |
| --lex-breadcrumb-color | — | — | color |
| --lex-breadcrumb-separator-color | — | — | color |
| --lex-breadcrumb-gap | — | — | gap |
Accessibility
- Wrap in <nav aria-label="Breadcrumb"> — this creates a navigation landmark screen readers can identify.
- Use an <ol> element because breadcrumbs represent an ordered hierarchical path.
- Separators must have aria-hidden="true" so screen readers skip them.
- The current page item uses aria-current="page" and is not a link.
- Screen readers announce the list structure, giving users context like "item 2 of 4".