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.
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:
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:
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:
<!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("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");" 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("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");" 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>
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("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");" 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("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");" 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:
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:
Reference: https://getbootstrap.com/docs/5.0/components/breadcrumb/