Materialize CSS Breadcrumbs

Materialize CSS breadcrumbs specify the current page location inside the navigation hierarchy. It highlights the active page, and greyed out the rest. Breadcrumb items are separated by a separator, and it comes into action due to multiple layers of content.
Basically, it explains where you stand in the navigation hierarchy. Although, you can easily access the rest of the navigation link easily. Therefore, it enhances the user experience.

Materialize Breadcrumb Classes

There are the following types of classes in the MaterializeCSS.

  • nav-wrapper - It is used to set the breadcrumb container or wrapper.
  • breadcrumb - Assign this class to the hyperlink element as a breadcrumb item. The last anchor element will be active, and the rest will be greyed out.

How To Create Materialize Breadcrumbs ?

To create a breadcrumb in Materialize.CSS, follow the steps outlined below.

  • Step 1 - To create a breadcrumb container, use the nav-wrapper class.
    Breadcrumb Container
     <div class="nav-wrapper"></div>  
        
       
  • Step 2 All breadcrumb items (anchor element, i.e. <a>) should be placed inside the breadcrumb container and each item should have the breadcrumb class.
    Breadcrumb Item
     <div class="nav-wrapper">
        <a href="#!" class="breadcrumb">Breadcrumb Item</a>
    </div>    
       
  • Step 3 - Additionally, the breadcrumb container should be placed within a nav element in order to enhance the appearance of the breadcrumb.
    Breadcrumb Nav
    <nav>
       <div class="nav-wrapper">
         <a href="#!" class="breadcrumb">Breadcrumb Item</a>
       </div>
    </nav>    
       

General Syntax

      <nav>
  <div class="nav-wrapper">
         <a href="#!" class="breadcrumb"> Breadcrumb Item </a>
  </div>
</nav>
    
Try it now

Source Code

          <div class="container">
  <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb"> Home </a>
        <a href="#!" class="breadcrumb"> Materialize CSS </a>
        <a href="#!" class="breadcrumb"> BreadCrumb </a>
      </div>
    </div>
  </nav>
</div>
        
Try it now

Breadcrumb Custom Separator & Its Color

If you want to change the separator of the breadcrumb, then override the CSS default properties of the .breadcrumb class. Let us see its basic syntax. Similarly, you can change the color of the breadcrumb by overriding the .breadcrumb color property.

General Syntax

      .breadcrumb:before{
<!--Breadcrumb Custom Separator --->
 content: ">>> ";
<!--Breadcrumb Color --->
 color: red;
}
    
Try it now

Materialize CSS Breadcrumb Color

To change the color of the breadcrumb link, target two classes: .breadcrumb and .breadcrumb: last-child, and override their color property value.

Source Code

          .breadcrumb{
  color: white;
}
.breadcrumb:last-child{
 color: yellow ;
}
        
Try it now

Conclusion

Materialize is a modern responsive CSS framework that is based on Material Design. It provides numerous Materialize components. Materialize CSS breadcrumbs are commonly used to navigate through multiple layers of content on a website. The active link is highlighted, while the rest are greyed out. The breadcrumb separator separates the breadcrumb items from each other and makes them appealing. Users have the option to customize the default separator to better suit their website design. Users can easily change the default separator and the color of the Materialize breadcrumb link using CSS.

Web Tutorials

Materialize CSS Breadcrumbs
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4