Bootstrap - Breadcrumb

Naman Kukreja
Last Updated: May 13, 2022

Introduction

We use bootstrap for our ease as it reduces so much time by providing it is inbuilt CSS, and javascript and the code they provide is also responsive, i.e., it changes according to user device request.

So without wasting any time, let’s dive into our topic and understand all about breadcrumb in bootstrap.

Bootstrap Breadcrumb

It is the navigation that tells the current position to the user and from where they come in a hierarchical order and can navigate back to those pages.

Image source.

The benefit of using breadcrumb is that we can know our past visits as they give us all the information in a navigation bar and can redirect to them.

Let's see a Bootstrap Breadcrumb with a simple example:

<h2>Welcome to Coding ninjas</h2>
<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Courses</a></li>
  <li><a href="#">Areas</a></li>
  <li>India</li>
</ul>


Output

Understanding Bootstrap Breadcrumb Classes

It is basically an unordered list with class .breadcrumb. There are more Bootstrap Breadcrumb classes that we can use.

Let’s try an example of step by step moving in coding ninja’s blog website:

<nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item active" aria-current="page">Coding Ninja's Blog Website</li>
        </ol>
      </nav>
    
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Coding Ninja's Blog Website</a></li>
          <li class="breadcrumb-item active" aria-current="page">Web-Development</li>
        </ol>
      </nav>
    
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Coding Ninja's Blog Website</a></li>
          <li class="breadcrumb-item"><a href="#">Web-Development</a></li>
          <li class="breadcrumb-item active" aria-current="page">Front-end</li>
        </ol>
      </nav>


Output

In the above example, first, we have discussed the case when the user has visited only one page. i.e., the Coding Ninja’s Blog Website has class= ”breadcrumb - item- active” as it always points to the current page. And further, we have discussed two pages, and then three pages. The pages visited earlier have the class breadcrumb-item with them, and the page on which the user is currently on has the class breadcrumb-item-active associated with it.

Bootstrap classes used in the above code are as follows:

  • class=”breadcrumb” - It is a bootstrap class which defines the content inside it to behave in a breadcrumb manner. In short, the items inside this class will arrange themselves in navigation order.
  • class=”breadcrumb-item” - It is written for the visited pages, and the anchor tag corresponding to them redirects to that page.
  • class=”breadcrumb-item-active” -The class above and this are almost similar. Still, the main difference is that the word active here active stands for the current page on which the user is, and because of this, there is no anchor tag following it because it does not need redirection.
  • aria-current=” page” - It is used whenever you want to indicate the current page within a set of pages. 
  • aria-label=” breadcrumb” - it is used to define the string that labels the current element.

Dividers in Bootstrap Breadcrumb

As you have seen above, pages are represented by a ‘/’ between them to change this to ‘>.’  They are already added in CSS through: before and content. They can be changed by modifying a local CSS custom property –bs-breadcrumb-divider.

The code will look something like this:

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Coding Ninja's Blog Website</a></li>
          <li class="breadcrumb-item active" aria-current="page">Web-Development</li>
        </ol>
      </nav>


Output

Bootstrap Breadcrumb Navigation Panel Color

You can color the breadcrumb navigation panel and text, for example, by using background and text contextual classes. Let us take a look at the example where the navigation panel is colored in dark:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb secondary-color">
      <li class="breadcrumb-item"><a class="white-text" href="#">Coding Ninjas</a></li>
      <li class="breadcrumb-item"><a class="white-text" href="#">Courses</a></li>
      <li class="breadcrumb-item active">Areas</li>
    </ol>
  </nav>


Output

You can also use “breadcrumb primary-color” or "breadcrumb default-color" for different navigation panel colours.

Accessibility

As breadcrumbs provide the path in a navigation form, it is beneficial for accessing all the tracks. To access the track, it is advisable to use a meaningful label to describe the type of navigation provided in the <nav> element.

Frequently Asked Questions

  1. What are the advantages of using Bootstrap?
    Bootstrap automatically adds responsive CSS, which makes it easy to use on phones, tablets, and desktops.
     
  2. What are the advantages of using breadcrumbs?
    It provides us the navigation of all our visited pages for redirection to those pages.
     
  3. Can the presentation of navigation in breadcrumbs be changed?
    Yes, It can be changed by using dividers.
     
  4. By looking at code, how can we find the current page and others?
    The page corresponding to the class name breadcrumb-item-active is the current page.

Key Takeaways

In this blog, we have learned about setting up bootstrap, using breadcrumbs in bootstrap, its uses, features, etc. 

You can also check our previous blog on Bootstrap Pagination. Want to learn more about front-end development? You must look at coding ninja’s Front end web development course

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think