Browse Components
Breadcrumbs
A clear path through your page hierarchy.
Basic
Linked ancestors lead to the current page, which is plain text.
View Code
HTML
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol role="list">
<li>
<a href="/">
Home
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<a href="/components">
Components
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<span aria-current="page">
Breadcrumbs
</span>
</li>
</ol>
</nav>Collapsed trail
Show Home, parent and current page. Open the ellipsis to reach intermediate pages; without JavaScript the full trail remains visible.
View Code
HTML
<nav class="breadcrumb" aria-label="Breadcrumb" data-breadcrumb-collapse>
<ol role="list">
<li>
<a href="/">
Home
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<a href="/docs">
Learn
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<a href="/docs/themes">
Themes
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<a href="/components">
Components
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<span aria-current="page">
Breadcrumbs
</span>
</li>
</ol>
</nav>Home icon
Use an accessible name for an icon-only home link.
View Code
HTML
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol role="list">
<li>
<a href="/" aria-label="Home">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 10 7.8-6.1a2 2 0 0 1 2.4 0L21 10M5 9v10a2 2 0 0 0 2 2h3v-6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v6h3a2 2 0 0 0 2-2V9">
</path>
</svg>
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<a href="/components">
Components
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<span aria-current="page">
Breadcrumbs
</span>
</li>
</ol>
</nav>Slash separator
Use a quieter text separator without changing the hierarchy.
View Code
HTML
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol role="list">
<li>
<a href="/">
Home
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<a href="/components">
Components
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<span aria-current="page">
Breadcrumbs
</span>
</li>
</ol>
</nav>Long labels
Every level stays visible on small screens. Long labels wrap without clipping.
View Code
HTML
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol role="list">
<li>
<a href="/">
Home
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<a href="/docs">
Learn
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<a href="/docs/integrations">
Framework Integrations
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<span aria-current="page">
Building accessible interfaces across frameworks
</span>
</li>
</ol>
</nav>Right-to-left
The trail and directional chevrons follow the reading direction.
View Code
HTML
<nav class="breadcrumb" aria-label="Breadcrumb" dir="rtl" lang="ar">
<ol role="list">
<li>
<a href="/">
الرئيسية
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<a href="/components">
المكونات
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
<svg
class="breadcrumb-chevron"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 5 7 7-7 7">
</path>
</svg>
</span>
<span aria-current="page">
مسار التنقل
</span>
</li>
</ol>
</nav>Collapsed right-to-left
The disclosure aligns with the reading direction and stays inside the viewport.
View Code
HTML
<nav class="breadcrumb" aria-label="Breadcrumb" data-breadcrumb-collapse dir="rtl">
<ol role="list">
<li>
<a href="/">
Home
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<a href="/docs">
Learn
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<a href="/docs/themes">
Themes
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<a href="/components">
Components
</a>
</li>
<li>
<span class="breadcrumb-separator" aria-hidden="true">
/
</span>
<span aria-current="page">
Breadcrumbs
</span>
</li>
</ol>
</nav>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/breadcrumb.css">
<script defer src="/library/assets/breadcrumb.js"></script>10,721 bytes CSS including base · 4,232 bytes runtime JavaScript
Usage
Show the hierarchy
Link to real ancestor pages in order, ending with one current page marked aria-current=page. Use a labeled nav and ordered list; do not use browsing history.
Keep every level reachable
Trails wrap on narrow screens and long labels remain visible. Separators stay attached to the next item. For long trails, add data-breadcrumb-collapse and load breadcrumb.js. Five or more items collapse to Home, an ellipsis, parent and current page. The disclosure keeps hidden ancestors reachable with native links; without enhancement the full trail remains visible.
Make navigation recognizable
Use a consistent separator, hide decorative icons from assistive technology, and label icon-only Home links. Native Tab and Enter behavior remains intact.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.