Create Breadcrumbs with Bootstrap 5

What is breadcrumb and how to use it in Bootstrap 5?

The breadcrumbs:

  • Aids users in navigating the website
  • Acts as the secondary navigation
  • Indicates the current page location within the hierarchy of navigation

Bootstrap 5 enables the creation of breadcrumb components easily by automatically adding separators via CSS.

An example of breadcrumb in Bootstrap 5

In order to create a default breadcrumb with minimal style, simply use the ordered or unordered list.

So, if you are using an ordered list then:

  • Assign .breadcrumb to the <ol>
  • Assign .breadcrumb-item class to each <li>.
  • Also, add .active class to the <li> that you will not be linked and shown as the current page.

See an example below:

Bootstrap5-breadcrumb

Code:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>

 <div class="container">

<h2>Bootstrap 5 Breadcrumb</h2>

<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="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li>

    <li class="breadcrumb-item active" aria-current="page">Bootstrap Select Control</li>

  </ol>

</nav>

<nav aria-label="breadcrumb">

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/java-tutorials/">Java</a></li>

    <li class="breadcrumb-item active" aria-current="page">Java Array</li>

  </ol>

</nav>

</div>

</body>

</html>

You can see, a forward slash is added as a separator for the basic styling.

An example of using “>” divider

You can change the breadcrumb divider in two ways:

  • By modifying –bs-breadcrumb-divider local CSS property
  • By $breadcrumb-divider Sass variable

The example below shows using the “greater than” sign i.e. “>” as the divider in breadcrumbs:

BS5-breadcrumb-divider

Code:

<!DOCTYPE html>

<html>

<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>

 <div class="container">

<h2>Bootstrap 5 Breadcrumb</h2>
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li>

    <li class="breadcrumb-item active" aria-current="page">Bootstrap Select Control</li>

  </ol>

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

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/java-tutorials/">Java</a></li>

    <li class="breadcrumb-item active" aria-current="page">Java Array</li>

  </ol>

</nav>
</div>

</body>

</html>

In the above code, you can see –bs-breadcrumb-divider is modified in the <nav> tag. There we used “>” divider.

Using embedded SVG icon as divider example

You may also embed the SVG icon as a divider in the Bootstrap 5 breadcrumb component. See an example below:

BS5-breadcrumb-SVG

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>
 <div class="container">
<h2>Bootstrap 5 Breadcrumb</h2>

<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="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li>

    <li class="breadcrumb-item active" aria-current="page">Bootstrap Select Control</li>

  </ol>

</nav>

<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="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/java-tutorials/">Java</a></li>

    <li class="breadcrumb-item active" aria-current="page">Java Array</li>

  </ol>

</nav>
</div>

</body>

</html>

Changing color of breadcrumb example

If you need to change the color of that SVG icon, you can do this easily. In the SVG code, see the fill=’currentColor’ in the above code. Now, just change the currentColor to the color of your choice.

For the example, I have changed this to orange and red colors – see the output and code below:

Code

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>
<body>

 <div class="container">

<h2>Bootstrap 5 Breadcrumb</h2>
<nav class="" 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='orange'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li>

    <li class="breadcrumb-item active" aria-current="page">Bootstrap Select Control</li>

  </ol>

</nav>

<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='red'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/java-tutorials/">Java</a></li>

    <li class="breadcrumb-item active" aria-current="page">Java Array</li>

  </ol>

</nav>

</div>
</body>

</html>

Output:

BS5-breadcrumb-SVG-col

Breadcrumbs without divider example

Don’t want to use dividers in breadcrumbs at all? No problem. Just use the –bs-breadcrumb-divider: ” and you are done.

See the example below:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>
<body>
 <div class="container">

<h2>Bootstrap 5 Breadcrumb</h2>
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">

  <ol class="breadcrumb">

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

  </ol>

</nav>

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

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li>

    <li class="breadcrumb-item active" aria-current="page">Bootstrap Select Control</li>

  </ol>

</nav>

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

  <ol class="breadcrumb">

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/">Home</a></li>

    <li class="breadcrumb-item"><a href="https://www.jquery-az.com/java-tutorials/">Java</a></li>

    <li class="breadcrumb-item active" aria-current="page">Java Array</li>

  </ol>

</nav>
</div>

</body>

</html>

Result:

BS5-breadcrumb-no-divi

Reference: https://getbootstrap.com/docs/5.0/components/breadcrumb/

 

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️