Breadcrumb

Indicate the current page’s location within a navigational hierarchy.

Dark (default) version

<!-- Basic example -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

<!-- Home icon -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">
        <i class="czi-home"></i>
        Home
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

// Basic example
nav(aria-label="breadcrumb").mb-3
  ol.breadcrumb
    li.breadcrumb-item
      a(href="#") Home
    li.breadcrumb-item
      a(href="#") Library
    li(aria-current="page").breadcrumb-item.active
      | Data

// Home icon
nav(aria-label="breadcrumb")
  ol.breadcrumb
    li.breadcrumb-item
      a(href="#")
        i.czi-home
        | Home
    li.breadcrumb-item
      | a(href="#") Library
    li(aria-current="page").breadcrumb-item.active
      | Data

Light version

<!-- Basic example -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-light">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

<!-- Home icon -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-light">
    <li class="breadcrumb-item">
      <a href="#">
        <i class="czi-home"></i>
        Home
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

// Basic example
nav(aria-label="breadcrumb").mb-3
  ol.breadcrumb.breadcrumb-light
    li.breadcrumb-item
      a(href="#") Home
    li.breadcrumb-item
      a(href="#") Library
    li(aria-current="page").breadcrumb-item.active
      | Data

// Home icon
nav(aria-label="breadcrumb")
  ol.breadcrumb.breadcrumb-light
    li.breadcrumb-item
      a(href="#")
        i.czi-home
        | Home
    li.breadcrumb-item
      | a(href="#") Library
    li(aria-current="page").breadcrumb-item.active
      | Data