Tuesday, March 7, 2017

Materialize - BreadCrumb

The Materialize provides various CSS classes to create a nice breadcrumb in easy way. The below table mentions the available classes and their effects.
S.N.Class Name & Description
1nav-wrapper
Set the nav component as breadcrumb/nav bar wrapper.
2breadcrumb
Set the anchor element as breadcrumb. Last anchor element is active, while rest are shown as greyed out.

Example

The following example showcases the use of breadcrumb classes to showcase 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.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)