Materialize CSS | Breadcrumbs

Breadcrumbs in materialize CSS is used when you have multiple layers of content to display your current location. Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. It uses two classes i.e. nav-wrapper and breadcrumb.

nav-wrapper is used to set the nav component as breadcrumb/nav bar wrapper.

breadcrumb is used to set the anchor element as breadcrumb. Last anchor element is active, while rest are shown as greyed out.

<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet" />
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <!--Let browser know website
        is optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <nav>
        <div class="nav-wrapper green">
            <div class="col s12">
                <a href="#" class="breadcrumb">
                    Home
                </a>
                <a href="#" class="breadcrumb">
                    Web Technologies
                </a>
                <a href="#" class="breadcrumb">
                    Materialize CSS
                </a>
                <a href="#" class="breadcrumb">
                    Breadcrumb
                </a>
            </div>
        </div>
    </nav>
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.