Bootstrap 5 Breadcrumb Example

In today’s tutorial, we will see how to use breadcrumb in bootstrap 5. For this section we will see simple breadcrumb, breadcrumb with divider, breadcrumb with icon and breadcrumb with shadow, border style. first you need to setup bootstrap 5 project. you can use cdn or read below article.

How to install & setup bootstrap 5

Bootstrap 5 Breadcrumb Example

1) Bootstrap 5 simple breadcrumb.

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

bootstrap 5 simple breadcrumb

2) Bootstrap 5 breadcrumb with background color.

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

Bootstrap 5 breadcrumb with background

3) Bootstrap 5 dividers breadcrumb.

<nav style="--bs-breadcrumb-divider: '>';" 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 style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-3">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

bootstrap 5 breadcrumbs with divider

4) Bootstrap 5 dividers breadcrumb with svg icon.

<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='currentColor'/%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">Library</li>
  </ol>
</nav>

bootstrap 5 breadcrumbs with divider svg icon

Bootstrap 5 Breadcrumb Using Shadow and Border Class.

1) You can use shadow class in breadcrumb.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-3 shadow-sm">
    <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 bg-light p-3 shadow-sm border">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav> 

bootstrap 5 breadcrumb style with shadow

2) Bootstrap 5 breadcrumb using border classes.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-3 border border-primary">
    <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 bg-light p-3 border border-success border-2">
    <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 bg-light p-3 border border-warning border-2">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

bootstrap 5 breadcrumb with border style