Bootstrap Breadcrumb
Bootstrap breadcrumb specifies 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
Steps To Create bootstrap 5 Breadcrumb :
General Syntax
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#!">Breadcrumb Item </a></li>
</ol>
</nav>
Source Code
<div class="container mt-5-">
<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>
</div>
Code Explanation
In this example, .breadcrumb is assigned to the breadcrumb container base class while .breadcrumb-item is assigned to the breadcrumb item base class.
Note! You have to focus on the .breadcrumb, .breadcrumb-item, and .active classes since these are used during breadcrumb creation.
Bootstrap Breadcrumb Custom Separator
Breadcrumb separator can be changed very easily by a custom property --bs-breadcrumb-divider.
Example
General Syntax
<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>
Source Code
<div class="container mt-5-">
<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>
</div>
Code Explanation
Note:
In this example, the breadcrumb separator has been changed by a custom property --bs-breadcrumb-divider.
Web Tutorials
