Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Example

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-transparent">
    <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>
<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>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark text-white">
    <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>

Changing the separator

Separators are automatically added in CSS through::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this or you can use class .breadcrumb-classic to add a lineawesome icon.

Breadcrumb

  1. Home
  2. Elements
  3. Breadcrumbs
<div class="py-8 bg-img"
style="background:linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.6)), url(../assets/img/share/jobs-bg.jpg) no-repeat center center;">
<div class="container-fluid">
  <div class="row mx-0 align-items-center">
    <div class="col-md-6">
      <h2 class="text-white">
        Breadcrumb
      </h2>
    </div>
    <div class="col-md-6">
      <ol class="breadcrumb breadcrumb-classic justify-content-md-end text-white mb-0">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Elements</a></li>
        <li class="breadcrumb-item">Breadcrumbs</li>
      </ol>
    </div>
  </div>
</div>
</div>

Breadcrumb with icon

<ol class="breadcrumb breadcrumb-classic mb-4">
  <li class="breadcrumb-item">
    <i class="la la-home mx-1"></i>
    <a href="#"> Home</a>
  </li>
  <li class="breadcrumb-item">
    <i class="la la-bookmark mx-1"></i>
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item">Data</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <i class="la la-home mx-1"></i>
    <a href="#"> Home</a>
  </li>
  <li class="breadcrumb-item">
    <i class="la la-bookmark mx-1"></i>
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item">Data</li>
</ol>