The breadcrumb is the type of navigation that shows user’s current location of the web page within the navigational hierarchy.
For example, you have a main category Electronics and Subcategory Smart-Phones. Within the smart phones, the product models with the brand name are created. If a user is on the product page then you may display the breadcrumb navigation like this:
Electronics >> Smart Phones >> Phone product page
In that way, not only users may know the current location but navigate back to the subcategory or main category pages as well.
Also see: Bootstrap 5 breadcrumbs
By using Bootstrap 4 Framework, you may create breadcrumbs navigation using built-in classes. In this tutorial, I will show you different styles using Bootstrap 4.
The simple example of breadcrumbs – basic style
Generally, you will use <nav>, <ol> and <li> tags of HTML for creating breadcrumbs. In the <ol> tag, specify the .breadcrumb class whereas in the <li> tags use the .breadcrumb-item class.
To show the current page differently, you may use the .active class in the <li> tag.
Complete code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h3 class="text-success">Demo of Breadcrumbs</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Electronics Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Electronics Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Smart Phones</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Electronics Home</a></li>
<li class="breadcrumb-item"><a href="#">Smart Phones</a></li>
<li class="breadcrumb-item active" aria-current="page">Brand Name Product Page</li>
</ol>
</nav>
</div>
</body>
</html>
Bootstrap 4 Breadcrumb style number 2
By using background and text contextual classes built-into Bootstrap 4, you may color the breadcrumb navigation panel and text, etc. Have a look at the online example where I used various classes for styling breadcrumbs:
The markup:
<div class="container"> <h3 class="text-primary">Demo of Breadcrumbs</h3> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-dark "> <li class="breadcrumb-item "><a href="#" class="text-light">Electronics Home</a></li> <li class="breadcrumb-item "><a href="#" class="text-light">Smart Phones</a></li> <li class="breadcrumb-item text-light active" aria-current="page">Brand Name Product Page</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-warning "> <li class="breadcrumb-item "><a href="#" class="text-success">Electronics Home</a></li> <li class="breadcrumb-item"><a href="#" class="text-success">Smart Phones</a></li> <li class="breadcrumb-item text-success active" aria-current="page">Brand Name Product Page</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-info "> <li class="breadcrumb-item "><a href="#" class="text-dark">Electronics Home</a></li> <li class="breadcrumb-item"><a href="#" class="text-dark">Smart Phones</a></li> <li class="breadcrumb-item text-dark active" aria-current="page">Brand Name Product Page</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-danger "> <li class="breadcrumb-item "><a href="#" class="text-warning">Electronics Home</a></li> <li class="breadcrumb-item"><a href="#" class="text-warning">Smart Phones</a></li> <li class="breadcrumb-item text-warning active" aria-current="page">Brand Name Product Page</li> </ol> </nav> </div>
Breadcrumb style number 3 with arrows
The following example uses the custom style with Bootstrap breadcrumbs. The custom CSS specifies the arrow style. Have a look at the demo and code:
Online demo and code
The CSS:
.arr-bread {
height: 36px;
padding: 0;
line-height: 36px;
list-style: none;
background-color: #D5DAE1
}
.arr-bread li, .arr-bread li a, .arr-bread li span {
display: inline-block;
vertical-align: top
}
.arr-bread li:not(:first-child) {
margin-left: 0px
}
.arr-bread li+li:before {
padding: 0;
content: ""
}
.arr-bread li span {
padding: 0 10px
}
.arr-bread li a, .arr-bread li:not(:first-child) span {
height: 36px;
padding: 0 10px 0 25px;
line-height: 36px
}
.arr-bread li:first-child a {
padding: 0 10px
}
.arr-bread li a {
position: relative;
color: #fff;
text-decoration: none;
background-color: #DC3545;
border: 1px solid #FFFF00
}
.arr-bread li:first-child a {
padding-left: 10px
}
.arr-bread li a:after, .arr-bread li a:before {
position: absolute;
top: -1px;
width: 0;
height: 0;
content: '';
border-top: 18px solid transparent;
border-bottom: 18px solid transparent
}
.arr-bread li a:before {
right: -10px;
z-index: 3;
border-left-color: #DF4454;
border-left-style: solid;
border-left-width: 11px
}
.arr-bread li a:after {
right: -11px;
z-index: 2;
border-left: 11px solid #FFFF00
}
.arr-bread li a:focus, .arr-bread li a:hover {
background-color: #BD2130;
border: 1px solid #BD2130
}
.arr-bread li a:focus:before, .arr-bread li a:hover:before {
border-left-color: #BD2130
}
.arr-bread li a:active {
background-color: #2494be;
border: 1px solid #2494be
}
.arr-bread li a:active:after, .arr-bread li a:active:before {
border-left-color: #2494be
}
The markup:
<div class="container"> <ol class="breadcrumb arr-bread"> <li><a href="#">Electronics Home</a></li> <li><a href="#">Smart Phones</a></li> <li class="active"><span>Brand Name Product Page</span></li> </ol> </div>
Using dot instead of slash in breadcrumb
All above examples except the last with arrows used the slash for separating breadcrumb items. You may use some other separator like a dot between the items. For using a dot or other symbol, use the CSS content property as follows:
The markup of one breadcrumb component:
<nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb-dot bg-warning "> <li class="breadcrumb-item "><a href="#" class="text-success">Electronics Home</a></li> <li class="breadcrumb-item"><a href="#" class="text-success">Smart Phones</a></li> <li class="breadcrumb-item text-success active" aria-current="page">Brand Name Product Page</li> </ol> </nav>
The CSS:
.breadcrumb-dot .breadcrumb-item+.breadcrumb-item::before {
content: "•";
color: #408080;
}
Using right arrows example
Similarly, you may use the right arrow in content property of CSS as follows:
The markup:
<nav aria-label="breadcrumb "> <ol class="breadcrumb arr-right bg-dark "> <li class="breadcrumb-item "><a href="#" class="text-light">Electronics Home</a></li> <li class="breadcrumb-item "><a href="#" class="text-light">Smart Phones</a></li> <li class="breadcrumb-item text-light active" aria-current="page">Brand Name Product Page</li> </ol> </nav>
The CSS
<style>
.arr-right .breadcrumb-item+.breadcrumb-item::before {
content: "›";
vertical-align:top;
color: #408080;
font-size:35px;
line-height:18px;
}
</style>