December 11, 2016

Materialize Breadcrumb

Materialize Breadcrumb Breadcrumbs are basically used to display the current location. In this tutorial we are going to explain how you can create breadcrumbs in Materialize framework.
You can also use our online editor to edit and run the code online.

Materialize Breadcrumb Example

Class nav-wrapper and breadcrumb is used to create Breadcrumb in Materialize. Here is a simple example of Breadcrumb-

Materialize Breadcrumb | Example:

 <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">Home</a>
        <a href="#!" class="breadcrumb">PHP</a>
        <a href="#!" class="breadcrumb">Codeigniter</a>
      </div>
    </div>
  </nav>

Try it »

In the above example we have created a simple breadcrumb with the current location “codeigniter”, which means you are on codeigniter page and it is under PHP category and Home points home page.

If you run the above example it will produce the output something like this –