Materialize CSS
  Prev Page
Next Page  
Materialize BreadCrumb
Materialize CSS BreadCrumb is used to display your current location. This is usually used when you have multiple layers of content. Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way to explain the followinng example : 
<!DOCTYPE html>
<html>
<head>
  <title>Materialize CSS BreadCrumb</title>
  <!--Responsive Meta Tag-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  
  <!--Import jQuery Library-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <!--Import materialize.js-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>

<div class="container">

  <nav>
      <div class="nav-wrapper">
        <div class="col s12">
          <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>

</body>
</html>
Output :
  Prev Page
Next Page