Matérialiser - BreadCrumb

Materialise fournit diverses classes CSS pour créer facilement un fil d'Ariane agréable. Le tableau suivant mentionne les classes disponibles et leurs effets.

N ° Sr. Nom et description de la classe
1

nav-wrapper

Définit le composant de navigation comme wrapper de barre de navigation / fil d'Ariane.
2

breadcrumb

Définit l'élément d'ancrage comme fil d'Ariane. Le dernier élément d'ancrage est actif, tandis que le repos est affiché en grisé.

Exemple

L'exemple suivant illustre l'utilisation de classes de fil d'Ariane pour présenter la barre de navigation.

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>

Résultat

Vérifiez le résultat.