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:

html

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet" />

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />

    <!--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=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
</body>

</html>

Output:

Materialize CSS Breadcrumbs

Explore