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


        
          Home
        
        
          Home
          Library
        
        
          Home
          Library
          Data

Breadcrumbs without usage of list markup:


        
          Home
          Library
          Data
          Bootstrap

Breadcrumbs with dark background


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

Breadcrumbs with light background


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

Breadcrumbs with uppercases

Breadcrumbs with a bold font


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

Breadcrumbs with icons


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

Breadcrumbs with arrows


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