Materialize CSS Breadcrumbs

Materialize Breadcrumb

Materialize CSS breadcrumb refers to the current page location inside the navigation hierarchy. It highlights the active page & separates the item with a separator & It is used due to multiple layers of content.

Steps To Create Breadcrumb

  • Wrap all the breadcrumb items inside the container and assign the .nav-wrapper class to the container.
    Breadcrumb Container
     <div class="nav-wrapper"></div>  
  • Assign the .breadcrumb class to the every breadcrumb item i.e hyperlink(<a>) element base class.
    Breadcrumb Item
     <div class="nav-wrapper">
     <a href="#!" class="breadcrumb">Breadcrumb Item</a>

General Syntax

<div class="nav-wrapper">
      <a href="#!" class="breadcrumb">Breadcrumb Item</a>
Try It Now

Source Code

<div class="row">
  <div class="col s12">
      <div class="nav-wrapper">
        <a href="#!" class="breadcrumb"> Home </a>
        <a href="#!" class="breadcrumb">About </a>
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS