Skip to content
Related Articles

Related Articles

Improve Article

What are the classes of breadcrumb in Materialize CSS ?

  • Difficulty Level : Hard
  • Last Updated : 18 Aug, 2021
Geek Week

Materialize is a modern responsive CSS framework based on Material Design by Google. Its goal is to develop a system of design that allows integrated user experience across all its services on any platform. Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Materialize comes with various useful components which helps developer to create responsive websites. BreadCrumbs is one the built-in component of materialize CSS. Breadcrumb in Materialize CSS is basically used when you have multiple layers of content to display the current working location of the user on a website or web App.

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

  • nav-wrapper: It basically sets the nav component as breadcrumb or a navbar wrapper.
  • breadcrumb: It is used to set the anchor element as breadcrumb. last anchor element is active, whereas the rest are shown as greyed out.

We can create breadcrumbs by using the following syntax.

Syntax:

<nav>
  <div class="nav-wrapper green">
    <a href="#html5" class="breadcrumb">HTML5</a>
    <a href="#materialize" class="breadcrumb">Materialize</a>
    <a href="#breadcrumb" class="breadcrumb">BreadCrumb</a>
  </div>
</nav>

Example 1: In this example, we have created a simple breadcrumb with the current location BreadCrumb, which means you are on the BreadCrumb page and it is under Materialize category and HTML5 points HTML5 page.



HTML




<html>
   <head>
      <title>BreadCrumb</title>
      <link
         rel="stylesheet"
         href=
      <link
         rel="stylesheet"
         href=
      <script
         type="text/javascript"
         src=
      </script>
      <script src=
      </script>
      <style>
         .container {
           height: 64px;
           display: flex;
           align-items: center;
         }
         h1 {
           justify-content: center;
           text-align: center;
         }
         div {
           display: flex;
           align-items: center;
           color: white;
           background-color: green;
         }
         span {
           font-family: Roboto;
           font-weight: 300;
           font-size: 20px;
           color: white;
         }
         i {
           margin: 0 8px;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div>
            <span>HTML5</span>
            <i class="material-icons">double_arrow</i>
         </div>
         <div>
            <span>Materialize</span>
            <i class="material-icons">double_arrow</i>
         </div>
         <div>
            <span>BreadCrumb</span>
            <i class="material-icons">double_arrow</i>
         </div>
      </div>
      <h1>GeeksForGeeks</h1>
   </body>
</html>

Output:

Example 2: In this example,  we will create a simple breadcrumb with the active current location BreadCrumb.

HTML




<html>
  <head>
    <title>BreadCrumb</title>
    <link
      rel="stylesheet"
      href=
    <link
      rel="stylesheet"
      href=
    <style>
      h1 {
        justify-content: center;
        text-align: center;
      }
    </style>
    <script
      type="text/javascript"
      src=
    </script>
    <script src=
    </script>
  </head>
  
  <body class="container">
    <nav>
      <div class="nav-wrapper green">
        <a href="#html5" class="breadcrumb">HTML5</a>
        <a href="#materialize" class="breadcrumb">Materialize</a>
        <a href="#breadcrumb" class="breadcrumb">BreadCrumb</a>
      </div>
    </nav>
    <h1>GeeksForGeeks</h1>
  </body>
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :