Bootstrap 5 Breadcrumbs

Bootstrap 5 breadcrumbs specify the current page location inside the navigational hierarchy. It enhances the accessibility of the website because it separates the navigation item with a separator.

Example

Breadcrumb Classes

There are mainly three basic classes that are used in Bootstrap breadcrumb.

breadcrumb: This class is used to create breadcrumb.
breadcrumb-item: This class is assigned to every item in the breadcrumb.
active: This class is used with the breadcrumb item to make the specific breadcrumb item active.

How To Create Breadcrumb In Bootstrap ?

Follow the following given below steps to create Bootstrap 5 breadcrumb navigation.

Wrap <ol> (ordered list) inside <nav> element.
Assign breadcrumb class to the ordered list <ol> element.
Add breadcrumb-item class to the list item <li> element's base class.
To make the breadcrumb item active, assign an additional active class to the list-item (<li>) element. Please keep in mind that the active breadcrumb item represents the current highlighted page, and It does not contain any hyperlink elements.

General Syntax

      <nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"> <a href="#">Breadcrumb-item</a> </li>
     <!--Breadcrumb active item does not contain hyperlink element -->
    <li class="breadcrumb-item active">Active Item</li>
  </ol>
</nav>

Try It Now

Source Code

    <nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Shop</a></li>
    <li class="breadcrumb-item active">Account</li>
  </ol>
</nav>

Try it yourself

Source Code : Output

Note:In this example,.breadcrumb is assigned to the breadcrumb container base class while .breadcrumb-item is assigned to the breadcrumb item base class.

Breadcrumb In Navbar

To create a breadcrumb inside the navbar, Simply place the breadcrumb inside the external wrapper namely <nav> element and assign it predefined navbar bar classes.

General Syntax

      <nav class="navbar navbar-expand-* navbar-* bg-*">
  <div class="container-fluid">
    <nav aria-label="breadcrumb"></nav>
   </div>
</nav>

Try It Now

Source Code

    <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="#">Exam</a></li>
        <li class="breadcrumb-item active">
          <a href="#">Result</a>
        </li>
      </ol>
    </nav>
  </div>
</nav>

Try it yourself

Source Code : Output

Bootstrap 5 Breadcrumbs Divider

Breadcrumb separator can be changed easily by --bs-breadcrumb-divider custom property. To change the divider, simply assign your custom divider sign to the --bs-breadcrumb-divider custom property. Here, we are assigning > divider icon to the described custom property.

General Syntax

      <nav style="--bs-breadcrumb-divider: '>';" >
    <ol class="breadcrumb"> </ol>
</nav>

Try It Now

Source Code

    <nav style="--bs-breadcrumb-divider: '>';" >
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

Try it yourself

Source Code : Output

Note:In this example, the breadcrumb separator has been changed by a custom property --bs-breadcrumb-divider.

Breadcrumb Without Divider

To create a breadcrumb without a divider, do not assign any value to the --bs-breadcrumb-divider custom property.

General Syntax

      <nav style="--bs-breadcrumb-divider: '';" ></nav>

Try It Now

Source Code

    <nav style="--bs-breadcrumb-divider: '';" >
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Learn</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Try it yourself

Source Code : Output

Breadcrumb With SVG Icon

You can also place an SVG icon inside the breadcrumb via CSS custom property.

Source Code

    <nav style="--bs-breadcrumb-divider: url(&#34;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='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Testing</li>
  </ol>
</nav>

Try it yourself

Source Code : Output

Breadcrumb Alignment

Breadcrumb is by default left aligned. To align in the center or right along the horizontal direction, use flex box helper utility classes.

Bootstrap Breadcrumb Align Center

Breadcrumbs can be aligned in the center using the flex and .justify-content-center classes.

General Syntax

      <nav class="breadcrumb d-flex justify-content-center">
   <ol class="breadcrumb"></ol>
</nav>

Try It Now

Source Code

    <nav aria-label="breadcrumb" class="breadcrumb d-flex justify-content-center">
   <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Movie</a></li>
    <li class="breadcrumb-item active">Ticket</li>
  </ol>     
</nav>

Try it yourself

Source Code : Output

Bootstrap Breadcrumb Align Right

To align Breadcrumb in the right, use flex and justify-content-end classes.

General Syntax

      <nav class="breadcrumb d-flex justify-content-end">
   <ol class="breadcrumb"></ol>
</nav>

Try It Now

Source Code

    <nav aria-label="breadcrumb" class="breadcrumb d-flex justify-content-end">
   <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">Web Design</li>
  </ol>     
</nav>

Try it yourself

Source Code : Output

Breadcrumb Color

Bootstrap breadcrumb item's color can be changed through cascade style sheet i.e. CSS

Source Code

    .breadcrumb-item a{
     color: red;
  }

.breadcrumb-item.active{
    color: blue;
}

Try it yourself

Breadcrumb Background Color

To change the Bootstrap 5 breadcrumbs background color, add .bg-* classes to the ordered list container's base class. Here, * specifies one of from the followings {primary|secondary|success|warning|light|dark|info}

General Syntax

      <nav> 
    <ol class="breadcrumb  bg-*"></ol>
  </nav>

Try It Now

Source Code

    <nav aria-label="breadcrumb">
    <ol class="breadcrumb  bg-light">
      <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>

Try it yourself

Source Code : Output

Always assign .bg-* class to the ordered list <ol> element's base color.

Conclusion

Bootstrap 5 breadcrumbs are used to display the current page location inside the navigation hierarchy. The navigation item is separated by a separator, and It can be changed either through CSS or custom CSS property. It is by default left aligned, but you can change its position to the center or right through flex box utility classes.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS