Materialize - BreadCrumb

Advertisements

Previous Page
Next Page  

Materialize provides various CSS classes to create a nice breadcrumb in an easy way. The following table mentions the available classes and their effects.

Sr.No. 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

The following example demonstrates the use of breadcrumb classes to showcase the navigation bar.

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>

Result

Verify the result.

Advertisements