Bootstrap 4 Breadcrumb Navigation
Breadcrumb navigation is a way of displaying information based on the website hierarchy. Taking a blog as an example, breadcrumb navigation can show the publication date, category, or tags. They represent the position of the current page within the navigation hierarchy and serve as a navigation aid in the user interface.
The breadcrumb navigation in Bootstrap is a simple one with.breadcrumbclass unordered list. The separators are added through ::before and content in CSS (bootstrap.min.css), and the class shown below is automatically added:
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #6C757D;
content: "/";
}
Bootstrap 4 Breadcrumb Navigation Example
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<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">Data</li>
</ol>
Try it »
We can also do it without using the list form:
Bootstrap 4 Breadcrumb Navigation Example
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
Try it »