Bootstrap allows you to add breadcrumbs to your pages. Generally ordered list <ol> HTML tag is used for breadcrumb and the items are listed using <li> tags. But you can use any text elements like navigation <nav> tags to identify the items as a breadcrumb. In this article, we will explain the possible ways to create breadcrumbs in Bootstrap 5.
Breadcrumb Classes
Below are the three basic CSS classes used in Bootstrap breadcrumb.
- .breadcrumb – to identify the listed items to be shown in a breadcrumb style.
- .breadcrumb-item – to list down all items of the breadcrumb.
- .breadcrumb-item active – to identify the active page on the breadcrumb structure.
Bootstrap Breadcrumb with Ordered List
Below is the complete code for creating a simple breadcrumb in Bootstrap 5:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="#">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active"><a href="#">Web Designing</a></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="#">Web Designing</a></li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ol>
</nav>
<!-- End of Breadcrumb -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Ideally you don’t need to include the script files for breadcrumb, but those scripts will be required when you use it on your theme or template along with other Bootstrap components. You can checkout the sample starter template to be used on a standard Bootstrap 5 templates.
Below is how the result of the above code will look like:
As you can see the breadcrumbs will have the following features by default:
- Right slash (/) will be added in-between each item using standard CSS pseudo element ::before using “content” attribute.
- The item color with link will be defaulted to blue #0275d8.
- The active item will be defaulted to grey color #636c72 without linking.
If you don’t like the default appearance then you can override the CSS properties in your theme. Below is an example to override the default breadcrumb class and add some background stuffs.
<style>
.breadcrumb {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px !important;
font-size: 16px;
line-height:2em;
}
</style>You have to add the above code inside the header section of your page and the final breadcrumb will look like below:
Changing Breadcrumb Separator
You can change the default separator (also called divider) in the breadcrumb with custom symbol by modifying the –bs-breadcrumb-divider: property. For example, you can use the small arrow like greater than symbol by using the below CSS inline in your HTML.
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item" aria-current="page">Web Designing</li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ol>
</nav>The result will be like below on your browser:
Important Points to Note
- Bootstrap breadcrumbs will only offer option to add the breadcrumb structure manually on your pages. When your site has hundreds of pages, you should use appropriate script to add the breadcrumb on each page manually. For example, the breadcrumb shown on this page is created with Yoast SEO plugin for WordPress. This plugin will add the breadcrumb automatically on all the pages without manual work.
- Remember breadcrumbs will be shown in Google and Bing search results instead of URL. You can learn more about breadcrumbs here.
Leave a Reply
Your email is safe with us.