Materialize CSS BreadCrumb

—

by

in 02. Components

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. Following is a list of available classes and their effects.

index	class name	description
1)	nav-wrapper	sets the nav component as breadcrumb/nav bar wrapper.
2)	breadcrumb	sets the anchor element as breadcrumb. last anchor element is active, while rest are shown as greyed out.

Example

<!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 s10">  

               <a href = "#" class = "breadcrumb">JavaTpoint</a>  

               <a href = "#" class = "breadcrumb">Technology</a>  

               <a href = "#" class = "breadcrumb">CSS</a>  

            </div>  

         </div>  

      </nav>  

   </body>     

</html>

Output:

Materialize Breadcrumb 1

Comments

Leave a Reply Cancel reply