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

Materialize Breadcrumb

Steps To Create Breadcrumb

Breadcrumb Container

Breadcrumb Item

General Syntax

Source Code

Source Code : Output

Web Tutorials