Materialize - Breadcrumb

Quiz

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.

Sr.No.

Class Name & Description

nav-wrapper

Sets the nav component as breadcrumb/nav bar wrapper.

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.


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

Output

Verify the output.

Print Page