Materialize CSS Breadcrumbs

Materialize Breadcrumb

Materialize CSS breadcrumb refers to the current page location inside the navigation hierarchy. It highlights the active page & separates the item with a separator & It is used due to multiple layers of content.

Steps To Create Breadcrumb

  • Wrap all the breadcrumb items inside the container and assign the .nav-wrapper class to the container.
    Breadcrumb Container
     <div class="nav-wrapper"></div>  
        
  • Assign the .breadcrumb class to the every breadcrumb item i.e hyperlink(<a>) element base class.
    Breadcrumb Item
     <div class="nav-wrapper">
     <a href="#!" class="breadcrumb">Breadcrumb Item</a>
    </div>    
        

General Syntax

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

Source Code

Download
<div class="row">
  <div class="col s12">
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="breadcrumb"> Home </a>
        <a href="#!" class="breadcrumb">About </a>
      </div>
    </nav>
  </div>
</div>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS