Logo
hummingbird

Breadcrumb

Breadcrumbs show the user’s current location within a site hierarchy and provide links to parent pages. Separators are applied automatically with CSS.

Class Name Type Description
breadcrumb Component Breadcrumb
breadcrumb-item Inner Breadcrumb item component
breadcrumb-separator-dashed Modifier Dashed separator
breadcrumb-separator-arrow Modifier Arrow separator
Basic Example

Create breadcrumbs with a semantic list (ol or ul) of linked items. Style spacing, color, and separators with utility classes to match your design.

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" class="link link-hover">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>
Icon

You can use an icon with a breadcrumb item

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#" class="link link-hover">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M17.5 19h1v-2.5H21v-1h-2.5V13h-1v2.5H15v1h2.5zm.5 2q-2.075 0-3.537-1.463T13 16t1.463-3.537T18 11t3.538 1.463T23 16t-1.463 3.538T18 21M4 19V7l8-6l8 6v2.3q-.475-.15-.975-.225T18 9V8l-6-4.5L6 8v9h5.075q.075.525.225 1.025t.375.975zm8-8.75"/></svg>
        Home
      </a>
    </li>
    <li class="breadcrumb-item">
      <a href="#" class="link link-hover">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-2V5H5v14zm2 0h9V5h-9zm-2 0H5z"/></svg>
        Components
      </a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 16q1.175 0 2.288.263T11 17.05V7.2q-1.025-.6-2.175-.9T6.5 6q-.9 0-1.788.175T3 6.7v9.9q.875-.3 1.738-.45T6.5 16m6.5 1.05q1.1-.525 2.213-.787T17.5 16q.9 0 1.763.15T21 16.6V6.7q-.825-.35-1.713-.525T17.5 6q-1.175 0-2.325.3T13 7.2zm-1 2.425q-.35 0-.663-.087t-.587-.238q-.975-.575-2.05-.862T6.5 18q-1.05 0-2.062.275T2.5 19.05q-.525.275-1.012-.025T1 18.15V6.1q0-.275.138-.525T1.55 5.2q1.15-.6 2.4-.9T6.5 4q1.45 0 2.838.375T12 5.5q1.275-.75 2.663-1.125T17.5 4q1.3 0 2.55.3t2.4.9q.275.125.413.375T23 6.1v12.05q0 .575-.487.875t-1.013.025q-.925-.5-1.937-.775T17.5 18q-1.125 0-2.2.288t-2.05.862q-.275.15-.587.238t-.663.087m2-10.7q0-.225.163-.462T14.525 8q.725-.25 1.45-.375T17.5 7.5q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 9q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025T14 8.775m0 5.5q0-.225.163-.462t.362-.313q.725-.25 1.45-.375T17.5 13q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 14.5q-.65 0-1.275.113t-1.2.312q-.45.175-.737-.012T14 14.275m0-2.75q0-.225.163-.462t.362-.313q.725-.25 1.45-.375t1.525-.125q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112t-.788-.038q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025t-.288-.65"/></svg>
      Breadcrumb
    </li>
  </ol>
</nav>
Separators

Breadcrumbs support different separator styles, such as dashed or arrow, to match your design preferences.

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-separator-dashed">
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-separator-arrow">
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="link link-hover link-primary">Components</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>
Badge Breadcrumb

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href='#' class="badge badge-subtle badge-link">Home</a></li>
    <li class="breadcrumb-item"><a href='#' class="badge badge-subtle badge-link">Component</a></li>
    <li class="breadcrumb-item active" aria-current="page"><span class="badge badge-subtle">Breadcrumb</span></li>
  </ol>
</nav>
CSS variables

The breadcrumb component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.breadcrumb {
  --breadcrumb-font-size: var(--text-sm);
  --breadcrumb-item-active-color: var(--text-color-default);
  --breadcrumb-item-gap: --spacing(2);
  --breadcrumb-item-separator: '/';
  --breadcrumb-separator-color: var(--text-color-highlight);
}