Materialize CSS Breadcrumbs

Materialize CSS breadcrumbs specify the current page location inside the navigation hierarchy. It highlights the active page & separates the item with a separator.

Steps To Create Breadcrumb Component

To create Materialize CSS breadcrumbs, wrap all the breadcrumb item inside the container having class .nav-wrapper and add .breadcrumb class to the <a> element base class.

General Syntax

      <nav>
  <div class="nav-wrapper">
    <a href="#!" class="breadcrumb"> 
      <i class="material-icons">home</i> Home
    </a>
    <a href="#!" class="breadcrumb"> Materialize CSS </a>
  </div>
</nav>

Try it now

Source Code

          <div class="container">
  <h2>Materialize CSS - Breadcrumb</h2>
  <nav>
    <div class="nav-wrapper">
      <div class="col s12 custom-css--enhancement">
        <a href="#!" class="breadcrumb"> <i class="material-icons">home</i> Home </a>
        <a href="#!" class="breadcrumb"> Materialize CSS </a>
        <a href="#!" class="breadcrumb"> BreadCrumb </a>
      </div>
    </div>
  </nav>
</div>

Try it now

Source Code: Output

Materialize CSS Breadcrumbs

Steps To Create Breadcrumb Component

Materialize CSS - Breadcrumb

Web Tutorials