Bootstrap 4 Breadcrumb Tutorial
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. Below are the three basic CSS classes used in Bootstrap 4 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
A simple breadcrumb example with ordered list should look like below:
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 | <!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Start of Breadcrumb --> <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item" href="#">Home</li> <li class="breadcrumb-item active">Web Designing</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item" href="#">Home</li> <li class="breadcrumb-item" href="#">Web Designing</li> <li class="breadcrumb-item active">Bootstrap</li> </ol> <!-- End of Breadcrumb --> <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 4 templates.
The result of the above code is shown below:
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 colors then you can override the CSS “color” property in your theme. Below is an example to override the item and active item colors to red and black.
1 2 3 4 | <style> .breadcrumb-item {color: red;} .breadcrumb-item.active {color: black;} </style> |
Bootstrap Breadcrumb with Text Elements
As mentioned above, it is always not necessary to use <ol> and <li> tags to add Breadcrumb. Bootstrap is smart and can identify any text elements with the class “.breadcrumb” as breadcrumb. Below is the example of using <nav> and <a> tags to create similar breadcrumb as created with ordered list.
1 2 3 4 5 6 7 8 9 10 11 12 | <nav class="breadcrumb"> <a class="breadcrumb-item active">Home</a> </nav> <nav class="breadcrumb"> <a class="breadcrumb-item" href="#">Home</a> <a class="breadcrumb-item active">Web Designing</a> </nav> <nav class="breadcrumb"> <a class="breadcrumb-item" href="#">Home</a> <a class="breadcrumb-item" href="#">Web Designing</a> <a class="breadcrumb-item active">Bootstrap</a> </nav> |
1. 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.
2. Remember breadcrumbs will be shown in Google and Bing search results instead of URL. You can learn more about breadcrumbs here.