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.
.nav-wrapper
class to the container.
<div class="nav-wrapper"></div>
.breadcrumb
class to the every breadcrumb item i.e hyperlink(<a>
) element base class.
<div class="nav-wrapper">
<a href="#!" class="breadcrumb">Breadcrumb Item</a>
</div>
<div class="nav-wrapper">
<a href="#!" class="breadcrumb">Breadcrumb Item</a>
</div>
<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>