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.