Breadcrumb

The breadcrumb shows where the current page sits in the hierarchy, with links back up to each ancestor. Long paths can collapse their middle into an ellipsis or a dropdown.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <button
    id="bc-demo-menu"
    class="btn btn-ghost btn-sm btn-icon"
    type="button"
    aria-label="Toggle menu"
  >
    <span class="breadcrumb-ellipsis">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
    </span>
  </button>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-item">Components</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-item active">Breadcrumb</a>
</nav>
 
<div
  class="dropdown"
  data-sp-toggle="#bc-demo-menu"
  data-sp-placement="bottom-start"
>
  <button class="dropdown-item">Documentation</button>
  <button class="dropdown-item">Themes</button>
</div>

Usage

Add the breadcrumb class to a <nav> and put one breadcrumb-item link per level inside, with separators between them. Mark the current page's item with the active class.

Class	Description
`breadcrumb`	Add to the `<nav>` holding the trail
`breadcrumb-item`	Add to each `<a>`; add `active` to the current page
`breadcrumb-separator`	Add to a `<span>` between items, holding the divider icon
`breadcrumb-ellipsis`	Add to a `<span>` standing in for collapsed items

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-item active">Components</a>
</nav>

Examples

Basic

A trail of links ending in the current page.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-item">Components</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-item active">Breadcrumb</a>
</nav>

Custom separator

Put any icon inside the separators.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12.1" cy="12.1" r="1"/></svg>
  </span>
  <a href="#" class="breadcrumb-item">Components</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12.1" cy="12.1" r="1"/></svg>
  </span>
  <a href="#" class="breadcrumb-item active">Breadcrumb</a>
</nav>

An item can open a dropdown with sibling pages.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12.1" cy="12.1" r="1"/></svg>
  </span>
  <button
    id="bc-dropdown-trigger"
    class="flex items-center gap-1"
    type="button"
  >
    Components
    <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12.1" cy="12.1" r="1"/></svg>
  </span>
  <a href="#" class="breadcrumb-item active">Breadcrumb</a>
</nav>
 
<div
  class="dropdown"
  data-sp-toggle="#bc-dropdown-trigger"
  data-sp-placement="bottom-start"
>
  <button class="dropdown-item">Documentation</button>
  <button class="dropdown-item">Themes</button>
</div>

Collapsed

Stand in for collapsed middle items with a breadcrumb-ellipsis.

<nav class="breadcrumb">
  <a href="#" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <span class="breadcrumb-ellipsis">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
    <span class="sr-only">More</span>
  </span>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-item">Components</a>
  <span class="breadcrumb-separator">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
  </span>
  <a href="#" class="breadcrumb-item active">Breadcrumb</a>
</nav>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="breadcrumb-rtl-demo" dir="rtl">
  <nav class="breadcrumb">
    <a href="#" class="breadcrumb-item" data-i18n="home">الرئيسية</a>
    <span class="breadcrumb-separator">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12.1" cy="12.1" r="1"/></svg>
    </span>
    <button id="bc-rtl-trigger" class="flex items-center gap-1" type="button">
      <span data-i18n="components">المكونات</span>
      <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <span class="breadcrumb-separator">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12.1" cy="12.1" r="1"/></svg>
    </span>
    <a href="#" class="breadcrumb-item active" data-i18n="breadcrumb">مسار التنقل</a>
  </nav>
 
  <div
    class="dropdown"
    data-sp-toggle="#bc-rtl-trigger"
    data-sp-placement="bottom-start"
  >
    <button class="dropdown-item" data-i18n="documentation">التوثيق</button>
    <button class="dropdown-item" data-i18n="themes">السمات</button>
    <button class="dropdown-item" data-i18n="github">جيت هاب</button>
  </div>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", home: "الرئيسية", components: "المكونات", breadcrumb: "مسار التنقل", documentation: "التوثيق", themes: "السمات", github: "جيت هاب" },
    he: { dir: "rtl", home: "בית", components: "רכיבים", breadcrumb: "פירורי לחם", documentation: "תיעוד", themes: "ערכות נושא", github: "גיטהאב" },
    en: { dir: "ltr", home: "Home", components: "Components", breadcrumb: "Breadcrumb", documentation: "Documentation", themes: "Themes", github: "GitHub" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("breadcrumb-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>