Rate this docs

Angular Bootstrap Breadcrumbs

Angular Breadcrumbs - Bootstrap 4 & Material Design

Angular Bootstrap breadcrumbs are navigation elements which indicate a current location on the website. Breadcrumbs show a hierarchy of the current location as well

They are highly useful in projects, that tend to have a large structure like magazines or documentations.

Examples of Angular Bootstrap breadcrumb use:

  • Documentation page,
  • Magazine,
  • ERP system.

See the following breadcrumbs examples:


Basic breadcrumbs


        <ol class="breadcrumb">
          <li class="breadcrumb-item active">Home</li>
        </ol>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">Library</li>
        </ol>
        <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">Data</li>
        </ol>
      
Breadcrumbs without usage of list markup:

        <nav class="breadcrumb">
          <a class="breadcrumb-item" href="#">Home</a>
          <a class="breadcrumb-item" href="#">Library</a>
          <a class="breadcrumb-item" href="#">Data</a>
          <span class="breadcrumb-item active">Bootstrap</span>
        </nav>
      

Breadcrumbs with dark background


        <div class="light-font">

          <ol class="breadcrumb default-color">
            <li class="breadcrumb-item active">Home</li>
          </ol>
          <ol class="breadcrumb primary-color">
            <li class="breadcrumb-item"><a class="white-text" href="#">Home</a></li>
            <li class="breadcrumb-item active">Library</li>
          </ol>
          <ol class="breadcrumb secondary-color">
            <li class="breadcrumb-item"><a class="white-text" href="#">Home</a></li>
            <li class="breadcrumb-item"><a class="white-text" href="#">Library</a></li>
            <li class="breadcrumb-item active">Data</li>
          </ol>

        </div>
      

        light-font .breadcrumb-item + .breadcrumb-item::before {
        color: #fff;
        }
        .light-font .breadcrumb-item.active {
        color: #cfd8dc;
        }
      

Breadcrumbs with light background


        <div class="dark-font">

          <ol class="breadcrumb cyan lighten-4">
            <li class="breadcrumb-item active">Home</li>
          </ol>
          <ol class="breadcrumb pink lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a></li>
            <li class="breadcrumb-item active">Library</li>
          </ol>
          <ol class="breadcrumb purple lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a></li>
            <li class="breadcrumb-item"><a class="black-text" href="#">Library</a></li>
            <li class="breadcrumb-item active">Data</li>
          </ol>

        </div>
      

        .dark-font .breadcrumb-item + .breadcrumb-item::before {
        color: #000; }
        .dark-font .breadcrumb-item.active {
        color: #455a64; }
      

Breadcrumbs with uppercases


        <div class="text-uppercase">

          <ol class="breadcrumb cyan lighten-4">
            <li class="breadcrumb-item active">Home</li>
          </ol>
          <ol class="breadcrumb cyan lighten-4">
            <li class="breadcrumb-item"><a class="" href="#">Home</a></li>
            <li class="breadcrumb-item active">Library</li>
          </ol>
          <ol class="breadcrumb cyan lighten-4">
            <li class="breadcrumb-item"><a class="" href="#">Home</a></li>
            <li class="breadcrumb-item"><a class="" href="#">Library</a></li>
            <li class="breadcrumb-item active">Data</li>
          </ol>

        </div>
      

Breadcrumbs with a bold font


        <ol class="breadcrumb">
          <li class="breadcrumb-item active">
            <h5 class="mr-3 mb-0 font-weight-bold"><strong>Home</strong></h5>
          </li>
        </ol>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a class="" href="#">
              <h5 class="mr-3 mb-0 font-weight-bold"><strong>Home</strong></h5>
            </a></li>
          <li class="breadcrumb-item active">
            <h5 class="mr-3 mb-0 font-weight-bold"><strong>Library</strong></h5>
          </li>
        </ol>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a class="" href="#">
              <h5 class="mr-3 mb-0 font-weight-bold"><strong>Home</strong></h5>
            </a></li>
          <li class="breadcrumb-item"><a class="" href="#">
              <h5 class="mr-3 mb-0 font-weight-bold"><strong>Library</strong></h5>
            </a></li>
          <li class="breadcrumb-item active">
            <h5 class="mr-3 mb-0 font-weight-bold"><strong>Data</strong></h5>
          </li>
        </ol>
      

        .breadcrumb-item + .breadcrumb-item::before {
        content: none; }
        .breadcrumb-item a h5::after {
        content: "/";
        margin-left: 1rem;
        color: #868e96; }
      

Breadcrumbs with icons


        <div class="bc-icons">

          <ol class="breadcrumb pink lighten-4">
            <li class="breadcrumb-item active">
              <mdb-icon icon="star-o" class="mr-2 white-text"></mdb-icon>Home
            </li>
          </ol>
          <ol class="breadcrumb pink lighten-3">
            <li class="breadcrumb-item">
              <mdb-icon icon="star-o" class="mr-2 white-text"></mdb-icon><a class="white-text" href="#">Home</a>
            </li>
            <li class="breadcrumb-item active">
              <mdb-icon icon="star-o" class="mr-2 white-text"></mdb-icon>Library
            </li>
          </ol>
          <ol class="breadcrumb pink lighten-2">
            <li class="breadcrumb-item">
              <mdb-icon icon="star-o" class="mr-2 white-text"></mdb-icon><a class="white-text" href="#">Home</a>
            </li>
            <li class="breadcrumb-item">
              <mdb-icon icon="star-o" class="mr-2 white-text"></mdb-icon><a class="white-text" href="#">Library</a>
            </li>
            <li class="breadcrumb-item active">
              <mdb-icon icon="star-o" class="mr-2 white-text"></mdb-icon>Data
            </li>
          </ol>

        </div>
      

        .bc-icons .breadcrumb-item + .breadcrumb-item::before {
        content: none; }
        .bc-icons .breadcrumb-item.active {
        color: #eeeeee; }
      

Breadcrumbs with arrows


        <div class="bc-icons-2">

          <ol class="breadcrumb indigo lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a>
              <mdb-icon icon="caret-right" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item"><a class="black-text" href="#">Library</a>
              <mdb-icon icon="caret-right" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item active">Data</li>
          </ol>
          <ol class="breadcrumb blue-grey lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a>
              <mdb-icon icon="angle-double-right" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item"><a class="black-text" href="#">Library</a>
              <mdb-icon icon="angle-double-right" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item active">Data</li>
          </ol>
          <ol class="breadcrumb purple lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a>
              <mdb-icon icon="angle-double-right" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item"><a class="black-text" href="#">Library</a>
              <mdb-icon icon="angle-double-right" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item active">Data</li>
          </ol>
          <ol class="breadcrumb red lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a>
              <mdb-icon icon="angle-double-left" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item"><a class="black-text" href="#">Library</a>
              <mdb-icon icon="angle-double-left" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item active">Data</li>
          </ol>
          <ol class="breadcrumb cyan lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a>
              <mdb-icon icon="angle-double-left" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item"><a class="black-text" href="#">Library</a>
              <mdb-icon icon="angle-double-left" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item active">Data</li>
          </ol>
          <ol class="breadcrumb amber lighten-4">
            <li class="breadcrumb-item"><a class="black-text" href="#">Home</a>
              <mdb-icon icon="angle-double-left" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item"><a class="black-text" href="#">Library</a>
              <mdb-icon icon="angle-double-left" class="mx-2"></mdb-icon>
            </li>
            <li class="breadcrumb-item active">Data</li>
          </ol>

        </div>
      

        .bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
        content: none; }
        .bc-icons-2 .breadcrumb-item.active {
        color: #455a64; }
      

Angular Breadcrumbs - API

In this section you will find informations about required modules of Angular Breadcrumbs component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { IconsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { IconsModule } from 'angular-bootstrap-md'