Breadcrumbs

Angular Bootstrap 5 Breadcrumbs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.


Basic example

        
            
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">Home</li>
              </ol>
            </nav>

            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Library</li>
              </ol>
            </nav>

            <nav aria-label="breadcrumb">
              <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" aria-current="page">Data</li>
              </ol>
            </nav>
          
        
    

Breadcrumb in navbar

Very often breadcrumb is placed in the navbar.

        
            
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <nav aria-label="breadcrumb">
                  <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" aria-current="page"><a href="#">Data</a></li>
                  </ol>
                </nav>
              </div>
            </nav>
          
        
    

Breadcrumb in header

If there is not enough space in navbar, consider placing breadcrumbs in a composition like this below.

        
            

              <!--Main Navigation-->
              <header>
                <!-- Navbar -->
                <nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white">
                  <!-- Container wrapper -->
                  <div class="container-fluid">
                    <!-- Search form -->
                    <form class="d-none d-md-flex input-group w-auto my-auto">
                      <input
                        autocomplete="off"
                        type="search"
                        class="form-control rounded"
                        placeholder='Search (ctrl + "/" to focus)'
                        style="min-width: 225px"
                      />
                      <span class="input-group-text border-0"><i class="fas fa-search"></i></span>
                    </form>

                    <!-- Right links -->
                    <ul class="navbar-nav ms-auto d-flex flex-row">
                      <!-- Notification dropdown -->
                      <li mdbDropdown class="nav-item dropdown me-3 me-lg-1">
                        <a
                          class="nav-link dropdown-toggle hidden-arrow"
                          id="navbarDropdownMenuLink"
                          role="button"
                          mdbDropdownToggle
                          aria-expanded="false"
                        >
                          <i class="fas fa-bell"></i>

                          <span class="badge rounded-pill badge-notification bg-danger">1</span>
                        </a>
                        <ul
                          mdbDropdownMenu
                          class="dropdown-menu dropdown-menu-end"
                          aria-labelledby="navbarDropdownMenuLink"
                        >
                          <li><a class="dropdown-item" href="#">Some news</a></li>
                          <li><a class="dropdown-item" href="#">Another news</a></li>
                          <li>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </li>
                        </ul>
                      </li>

                      <!-- Icon dropdown -->
                      <li mdbDropdown class="nav-item dropdown">
                        <a
                          class="nav-link dropdown-toggle"
                          id="navbarDropdown"
                          role="button"
                          mdbDropdownToggle
                          aria-expanded="false"
                        >
                          <i class="united kingdom flag m-0"></i>
                        </a>
                        <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <li>
                            <a class="dropdown-item" href="#"
                              ><i class="united kingdom flag"></i>English
                              <i class="fa fa-check text-success ms-2"></i
                            ></a>
                          </li>
                          <li><hr class="dropdown-divider" /></li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>
                          </li>
                        </ul>
                      </li>

                      <!-- Avatar -->
                      <li mdbDropdown class="nav-item dropdown">
                        <a
                          class="nav-link dropdown-toggle d-flex align-items-center"
                          id="navbarDropdownMenuLink"
                          role="button"
                          mdbDropdownToggle
                          aria-expanded="false"
                        >
                          <img
                            src="https://mdbootstrap.com/img/new/avatars/2.jpg"
                            class="rounded-circle"
                            height="22"
                            alt=""
                            loading="lazy"
                          />
                        </a>
                        <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                          <li><a class="dropdown-item" href="#">My profile</a></li>
                          <li><a class="dropdown-item" href="#">Settings</a></li>
                          <li><a class="dropdown-item" href="#">Logout</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  <!-- Container wrapper -->
                </nav>
                <!-- Navbar -->

                <!-- Heading -->
                <div class="p-5 bg-light mb-4">
                  <h1 class="">Dashboard</h1>
                  <!-- Breadcrumb -->
                  <nav class="d-flex">
                    <h6 class="mb-0">
                      <a href="" class="text-reset">Home</a>
                      <span>/</span>
                      <a href="" class="text-reset">Analytics</a>
                      <span>/</span>
                      <a href="" class="text-reset"><u>Dashboard</u></a>
                    </h6>
                  </nav>
                  <!-- Breadcrumb -->
                </div>
                <!-- Heading -->
              </header>
              <!--Main Navigation-->

            
        
    

Changing the separator

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:

        
            
            $breadcrumb-divider: quote(">");
          
        
    

It’s also possible to use an embedded SVG icon:

        
            
            $breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
            width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z'
            fill='currentColor'/%3E%3C/svg%3E");
          
        
    

The separator can be removed by setting $breadcrumb-divider to none:

        
            
            $breadcrumb-divider: none;
          
        
    

Accessibility

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.


Breadcrumb - API


CSS variables

As part of MDB’s evolving CSS variables approach, breadcrumb now uses local CSS variables on .breadcrumb for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

        
            
        // .breadcrumb
        --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
        --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
        --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
        @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
        --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
        --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
        --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
        --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
        --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
        
        // .navbar
        //.breadcrumb
        --#{$prefix}breadcrumb-item-color: #{$breadcrumb-item-color};
        --#{$prefix}breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color};
        --#{$prefix}breadcrumb-item-before-color: #{$breadcrumb-item-before-color};
        --#{$prefix}breadcrumb-item-transition: #{$breadcrumb-item-transition};
        
        
    

SCSS variables

        
            
        $breadcrumb-font-size: null;
        $breadcrumb-padding-y: 0;
        $breadcrumb-padding-x: 0;
        $breadcrumb-item-padding-x: 0.5rem;
        $breadcrumb-margin-bottom: 1rem;
        $breadcrumb-bg: null;
        $breadcrumb-divider-color: $gray-600;
        $breadcrumb-active-color: $gray-600;
        $breadcrumb-divider: quote('/');
        $breadcrumb-divider-flipped: $breadcrumb-divider;
        $breadcrumb-border-radius: null;

        $breadcrumb-item-color: rgba(0, 0, 0, 0.55);
        $breadcrumb-item-transition: color 0.15s ease-in-out;
        $breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
        $breadcrumb-item-before-color: $breadcrumb-item-color;