Breadcrumbs

Bootstrap 5 Breadcrumbs component

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 data-mdb-navbar-init class="navbar navbar-expand-lg bg-body-tertiary">
            <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 bg-body">
            <!-- 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 class="nav-item dropdown">
                  <a data-mdb-dropdown-init class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
                    role="button" aria-expanded="false">
                    <i class="fas fa-bell"></i>
                    <span class="badge rounded-pill badge-notification bg-danger">1</span>
                  </a>
                  <ul 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 class="nav-item dropdown">
                  <a data-mdb-dropdown-init class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdown" role="button" aria-expanded="false">
                    <i class="flag-united-kingdom flag m-0"></i>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-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="flag-poland flag"></i>Polski</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-china flag"></i>中文</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-japan flag"></i>日本語</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-germany flag"></i>Deutsch</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-france flag"></i>Français</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-spain flag"></i>Español</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-russia flag"></i>Русский</a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#"><i class="flag-portugal flag"></i>Português</a>
                    </li>
                  </ul>
                </li>
        
                <!-- Avatar -->
                <li class="nav-item dropdown">
                  <a data-mdb-dropdown-init class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href="#"
                    id="navbarDropdownMenuLink" role="button" aria-expanded="false">
                    <img src="https://mdbootstrap.com/img/new/avatars/2.jpg" class="rounded-circle" height="22" alt="Avatar"
                      loading="lazy" />
                  </a>
                  <ul class="dropdown-menu dropdown-menu-end" 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-body-tertiary 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-->
  
            
        
    
        
            
              // Initialization for ES Users
              import { Dropdown, initMDB } from "mdb-ui-kit";
              
              initMDB({ Dropdown });
            
        
    

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: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55);
        $breadcrumb-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55);
        $breadcrumb-divider: quote('/');
        $breadcrumb-divider-flipped: $breadcrumb-divider;
        $breadcrumb-border-radius: null;

        $breadcrumb-item-color: $breadcrumb-active-color;
        $breadcrumb-item-transition: color 0.15s ease-in-out;
        $breadcrumb-item-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.7);
        $breadcrumb-item-before-color: $breadcrumb-divider-color;