View on GitHub

Breadcrumb Extended

Breadcrumb version that can use icons.

Liander variant example

The breadcrumb-liander removes the Bootstrap seperator and gives room to use icons.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-liander">
    <li class="breadcrumb-item active" aria-current="page">
      <span class="fas fa-home-alt"></span><span class="ml-3">Home</span>
    </li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-liander">
    <li class="breadcrumb-item">
      <a href="#">
        <span class="fas fa-home-alt"></span><span class="ml-3">Home</span>
      </a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      <span class="far fa-angle-right text-gray-300"></span><span class="ml-3">Library</span>
    </li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-liander">
    <li class="breadcrumb-item">
      <a href="#">
        <span class="fas fa-home-alt"></span><span class="ml-3">Home</span>
      </a>
    </li>
    <li class="breadcrumb-item">
      <span class="far fa-angle-right text-gray-300"></span><a class="ml-3" href="#">Library</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      <span class="far fa-angle-right text-gray-300"></span><span class="ml-3">Data</span>
    </li>
  </ol>
</nav>

Liander wrapper example

The breadcrumb-liander-wrapper makes the breadcrumb background span the whole page and uses the old liander.nl background.

<div class="bg-white p-3">
  <div class="breadcrumb-liander-wrapper">
    <div class="container">
      <div class="row">
        <div class="col">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-liander">
              <li class="breadcrumb-item active" aria-current="page">
                <span class="fas fa-home-alt"></span><span class="ml-3">Home</span>
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>