Materialize CSS Breadcrumbs
Materialize CSS breadcrumbs display the current page location inside the website navigation hierarchy. It highlights the active page & separates the item with a separator and It is used due to multiple layers of content.
Steps To Create Materialize Breadcrumb
-
Wrap all the breadcrumb items inside the container and assign the
.nav-wrapperclass to the container.Breadcrumb Container
<div class="nav-wrapper"></div> - Assign the
.breadcrumbclass 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> </div>
General Syntax
<div class="nav-wrapper">
<a href="#!" class="breadcrumb">Breadcrumb Item</a>
</div>
Source Code
<div class="row">
<div class="col s12">
<nav>
<div class="nav-wrapper">
<a href="#!" class="breadcrumb"> Home </a>
<a href="#!" class="breadcrumb">About </a>
</div>
</nav>
</div>
</div>
Source Code : Output
Frequently Asked Question(FAQ)
How To Change Materialize Breadcrumb Separator?
Materialize breadcrumb's default separator can be changed easily by overriding the CSS default properties of the .breadcrumb class.
General Syntax
.breadcrumb:before{
content: ">>> ";
}
How To Change Materialize Breadcrumb Separator Colors?
Simply, override the color property of breadcrumb:before class to change the breadcrumb separator color.
Source Code
.breadcrumb:before{
color: orange;
}
How To Change Materialize Breadcrumb Link Colors?
To change the Breadcrumb link color,simply change the color property of .breadcrumb and breadcrumb:last-child class.
The breadcrumb:last-child class is used to change the breadcrumb active link color.
Source Code
.breadcrumb{
color: white;
}
.breadcrumb:last-child{
color: yellow ;
}
Web Tutorials
