The breadcrumbs in Bootstrap 4
The breadcrumb is the type of navigation that shows user current location of the web page within the navigational hierarchy.
For example, you have 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.
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.
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.
For showing the current page differently, you may use the .active class in the <li> tag.
See online demo and code
A sample breadcrumb markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Grab the complete code from the demo page.
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:
See online demo and code
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<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:
See online demo and code
The CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
.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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
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:
See online demo and code
The markup of one breadcrumb component:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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:
1 2 3 4 5 6 7 |
.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:
See online demo and code
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .arr-right .breadcrumb-item+.breadcrumb-item::before { content: "›"; vertical-align:top; color: #408080; font-size:35px; line-height:18px; } </style> |
See the output of this example on the demo page.