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

Show code

HTML

        
            
          <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

Show code

HTML

        
            
          <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

Show code

HTML

        
            
          <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

Show code

HTML

        
            
          <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

Show code

HTML

        
            
          <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

Show code

HTML
SCSS

        
            
          <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

Show code

HTML
SCSS

        
            
          <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.

Show code

Pro
Free

        
            
          import { BreadcrumbModule, IconsModule } from 'ng-uikit-pro-standard'

        
            
          import { BreadcrumbModule, IconsModule } from 'angular-bootstrap-md'

Import example Modules list

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"`

Introduction
Modules used