v1.2.0
Website Preview Support

Breadcrumb

Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.

Default markup

Use the breadcrumb class to add a breadcrumb to your interface design for better navigation. The active modifier in a li tag will help you indicate the current page location and facilitate navigation within your website or app.

<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">...</a>
  </li>
  <li class="breadcrumb-item active">
    <a href="#">...</a>
  </li>
</ol>

Look at the example below to see how breadcrumbs work in practice.

  1. Home
  2. Library
  3. Data 
<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">
    <a href="#">Data</a>
  </li>
</ol>

Different separators

You can use different breadcrumb styles to match your website or app design. Choose between breadcrumb-dots, breadcrumb-arrows, and breadcrumb-bullets to create a unique look.

<ol class="breadcrumb breadcrumb-dots">
  ...
</ol>

This example shows how to use different breadcrumb styles.

  1. Home
  2. Library
  3. Data
  1. Home
  2. Library
  3. Data
  1. Home
  2. Library
  3. Data 
<ol class="breadcrumb breadcrumb-dots">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item active">
    <a href="#">Data</a>
  </li>
</ol>
<ol class="breadcrumb breadcrumb-arrows">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item active">
    <a href="#">Data</a>
  </li>
</ol>
<ol class="breadcrumb breadcrumb-bullets">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item active">
    <a href="#">Data</a>
  </li>
</ol>

With icon

You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.

  2. Library
  3. Data 
<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">
      <!-- Download SVG icon from http://tabler.io/icons/icon/home -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
      </svg>
    </a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item active">
    <a href="#">Data</a>
  </li>
</ol>

Muted breadcrumbs

You can use the breadcrumb-muted class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-muted">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Library</a>
    </li>
    <li class="breadcrumb-item active">
      <a href="#">Data</a>
    </li>
  </ol>
</nav>

You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.

  1. Home
  2. Library
  3. Articles

Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.

Edit Publish 
<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <div class="mb-1">
        <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">
            <a href="#">Articles</a>
          </li>
        </ol>
      </div>
      <h2 class="page-title">
        <span class="text-truncate">Knights of Ni, we are but simple travelers
          who seek the enchanter who lives beyond these
          woods.</span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn d-none d-md-inline-flex">
          <!-- Download SVG icon from http://tabler.io/icons/icon/edit -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
            viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="icon icon-1">
            <path
              d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
            <path
              d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
            <path d="M16 5l3 3" />
          </svg>
          Edit
        </a>
        <a href="#" class="btn btn-primary">Publish</a>
      </div>
    </div>
  </div>
</div>

Table of Contents