Angular Bootstrap Breadcrumbs

Angular Breadcrumbs - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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


        <mdb-breadcrumb>
          <mdb-breadcrumb-item class="active">Home</mdb-breadcrumb-item>
        </mdb-breadcrumb>

        <mdb-breadcrumb>
          <mdb-breadcrumb-item class="blue-text">Home</mdb-breadcrumb-item>
          <mdb-breadcrumb-item class="active">Library</mdb-breadcrumb-item>
        </mdb-breadcrumb>

        <mdb-breadcrumb>
          <mdb-breadcrumb-item class="blue-text">Home</mdb-breadcrumb-item>
          <mdb-breadcrumb-item class="blue-text">Library</mdb-breadcrumb-item>
          <mdb-breadcrumb-item class="active">Data</mdb-breadcrumb-item>
        </mdb-breadcrumb>
      

Breadcrumbs with dark background


        <div class="light-font">
          <mdb-breadcrumb customClass="default-color">
            <mdb-breadcrumb-item class="active">Home</mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="primary-color white-text">
            <mdb-breadcrumb-item>Home</mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">Library</mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="secondary-color white-text">
            <mdb-breadcrumb-item>Home</mdb-breadcrumb-item>
            <mdb-breadcrumb-item>Library</mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </div>
      

Breadcrumbs with light background


        <div class="dark-font">
          <mdb-breadcrumb customClass="cyan lighten-4">
            <mdb-breadcrumb-item class="active">Home</mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="pink lighten-4">
            <mdb-breadcrumb-item>Home</mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">Library</mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="purple lighten-4">
            <mdb-breadcrumb-item>Home</mdb-breadcrumb-item>
            <mdb-breadcrumb-item>Library</mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </div>
      

Breadcrumbs with text-transform


        <div class="dark-font">
          <mdb-breadcrumb textTransform="uppercase" customClass="cyan lighten-4">
            <mdb-breadcrumb-item class="active">Home</mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb textTransform="lowercase" customClass="pink lighten-4">
            <mdb-breadcrumb-item>HOME</mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">Library</mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb textTransform="capitalize" customClass="purple lighten-4">
            <mdb-breadcrumb-item>home library</mdb-breadcrumb-item>
            <mdb-breadcrumb-item>Library</mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </div>
      

Breadcrumbs with font weight


        <div class="dark-font">
          <mdb-breadcrumb customClass="purple lighten-4">
            <mdb-breadcrumb-item fontWeight="light">Home</mdb-breadcrumb-item>
            <mdb-breadcrumb-item fontWeight="normal">Library</mdb-breadcrumb-item>
            <mdb-breadcrumb-item fontWeight="bold" class="active">Data</mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </div>
      

Breadcrumbs with icons


        <div class="dark-font bc-icons">
          <mdb-breadcrumb customClass="white-text pink lighten-4">
            <mdb-breadcrumb-item class="active">
              <mdb-icon far icon="star" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="white-text pink lighten-3">
            <mdb-breadcrumb-item>
              <mdb-icon far icon="star" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon far icon="star" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="white-text pink lighten-2">
            <mdb-breadcrumb-item>
              <mdb-icon far icon="star" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item>
              <mdb-icon far icon="star" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon far icon="star" class="mr-1"></mdb-icon> Data
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>
        </div>
      

        .bc-icons .breadcrumb-item+.breadcrumb-item::before {
          content: none;
        }

        .bc-icons {
          mdb-breadcrumb {
            mdb-breadcrumb-item.active {
              .breadcrumb-item {
                color: #fff !important;
              }
            }
          }
        }
      

Breadcrumbs with arrows


        <div class="dark-font bc-icons-2">
          <mdb-breadcrumb customClass="black-text indigo lighten-4">
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="caret-right" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="caret-right" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon fas icon="caret-right" class="mr-1"></mdb-icon> Data
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="black-text blue-grey lighten-4">
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-double-right" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-double-right" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon fas icon="angle-double-right" class="mr-1"></mdb-icon> Data
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="black-text purple lighten-4">
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-right" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-right" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon fas icon="angle-right" class="mr-1"></mdb-icon> Data
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="black-text indigo lighten-4">
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="caret-left" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="caret-left" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon fas icon="caret-left" class="mr-1"></mdb-icon> Data
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="black-text blue-grey lighten-4">
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-double-left" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-double-left" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon fas icon="angle-double-left" class="mr-1"></mdb-icon> Data
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>

          <mdb-breadcrumb customClass="black-text purple lighten-4">
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-left" class="mr-1"></mdb-icon> Home
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item>
              <mdb-icon fas icon="angle-left" class="mr-1"></mdb-icon> Library
            </mdb-breadcrumb-item>
            <mdb-breadcrumb-item class="active">
              <mdb-icon fas icon="angle-left" class="mr-1"></mdb-icon> Data
            </mdb-breadcrumb-item>
          </mdb-breadcrumb>


        </div>
      

        .bc-icons-2 .breadcrumb-item+.breadcrumb-item::before {
          content: none;
        }

        .bc-icons-2 {
          mdb-breadcrumb {
            mdb-breadcrumb-item.active {
              .breadcrumb-item {
                color: #000 !important;
              }
            }
          }
        }
      

Angular Breadcrumbs - API

In this section you will find informations about required modules and inputs 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 { BreadcrumbModule, IconsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { BreadcrumbModule, IconsModule } from 'angular-bootstrap-md'

Inputs

MdbBreadcrumbComponent
Name Type Default Description Example
customClass string ' ' Allows to add classes to the mdb-breadcrumb-item storage list. customClass="purple white-text"
textTransform string ' ' Allows to change the appearance of text in the component. Allowed options are: uppercase, lowercase,capitalize textTransform="uppercase"
MdbBreadcrumbItemComponent
Name Type Default Description Example
fontWeight string ' ' Allows to change the font weight of text in the component. Allowed options are: light, normal,bold fontWeight="bold"