Materialize CSS Breadcrumbs

Breadcrumbs in materialize CSS is used when you have multiple layers of content to display your current location. Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. It uses two classes i.e. nav-wrapper and breadcrumb.

nav-wrapper is used to set the nav component as breadcrumb/nav bar wrapper.

breadcrumb is used to set the anchor element as breadcrumb. Last anchor element is active, while rest are shown as greyed out.

<nav>
 <div class="nav-wrapper">
 <div class="col s12">
 <a href="#!" class="breadcrumb">First</a>
 <a href="#!" class="breadcrumb">Second</a>
 <a href="#!" class="breadcrumb">Third</a>
 </div>
 </div>
 </nav>

Example:

Output: