Materializar - BreadCrumb

Materialise proporciona varias clases de CSS para crear una buena ruta de navegación de una manera fácil. La siguiente tabla menciona las clases disponibles y sus efectos.

No Señor. Nombre y descripción de la clase
1

nav-wrapper

Establece el componente de navegación como contenedor de ruta de navegación / barra de navegación.
2

breadcrumb

Establece el elemento de anclaje como ruta de navegación. El último elemento de anclaje está activo, mientras que el resto se muestra en gris.

Ejemplo

El siguiente ejemplo demuestra el uso de las clases de ruta de navegación para mostrar la barra de navegación.

materialize_breadcrumb.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize BreadCrumb Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <nav>
         <div class = "nav-wrapper">
            <div class = "col s12">
               <a href = "#" class = "breadcrumb">Home</a>
               <a href = "#" class = "breadcrumb">Technology</a>
               <a href = "#" class = "breadcrumb">HTML5</a>
            </div>
         </div>
      </nav>
   </body>   
</html>

Resultado

Verifique el resultado.