Breadcrumb
Shows the page location in the hierarchy. Separators flip in RTL.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<nav class="px-crumbs" aria-label="Breadcrumb">
<ol>
<li><a href="#" aria-label="Home"><svg class="px-icon" aria-hidden="true">…</svg></a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Website redesign</a></li>
<li><span aria-current="page">Settings</span></li>
</ol>
</nav>Usage
- Collapse middle items into “…” when there are more than 4.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Slash separator
<nav class="px-crumbs px-crumbs--slash" aria-label="Breadcrumb"><ol><li><a href="#">Docs</a></li><li><a href="#">Components</a></li><li><span aria-current="page">Breadcrumb</span></li></ol></nav>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-crumbs · --slash | class | Separator (Chevron default). |
aria-current="page" | attribute | Current item, not a link. |
Figma properties
Breadcrumbs4 variants · page “Breadcrumbs”Open
Shows the page location in the hierarchy. Chevron separators point to the inline end, so they flip in RTL. Collapse middle items into a … menu when there are more than 4. Wrap in <nav aria-label=&q…
| Property | Type | Values |
|---|---|---|
| Separator | Variant | Chevron Slash |
| Direction | Variant | LTR RTL |
Breadcrumb item8 variants · page “Breadcrumbs”Open
One crumb. The last item is Current (aria-current="page") and is not a link.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Projects” |
| Type | Variant | Home Text |
| State | Variant | Default Hover Focused Current |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-breadcrumb-separator | color-content-neutral-placeholder | #667085 |
Accessibility
- Wrap in <nav aria-label="Breadcrumb">.