The breadcrumbs component is used to let users know the current location as visiting your website. This is particularly useful if you have web pages based on categories or have multiple layers.
The breadcrumbs generally display under the top navigation like this:
Top Category >Sub-Category >information page
The Materialize CSS has a built-in class to help you style breadcrumbs, so you do not require to look around if already using that framework.
In a wrapper element like <nav> tag, use the links tag to be used in breadcrumbs. In each link tag, use the breadcrumb class. As you add links, the last link is displayed as “active” with bright white color while its sub-category or category links are displayed as dimmed links automatically. Have a look:
The code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container">
<h5>A demo of Materialize Breadcrumbs</h5>
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">Top Category</a>
<a href="#!" class="breadcrumb">Sub Category</a>
<a href="#!" class="breadcrumb">Product / Service Page</a>
</div>
</div>
</nav>
</div>
</body>
</html>
Changing the arrow color example
The following example shows how you may change the color of the arrow by overriding the default class for breadcrumbs. Have a look at the code in example page under the <style> section:
The CSS to be used after the reference of Materialize CSS:
.breadcrumb:before {
color: #f4ff81;
}
Overriding the color of links
Similarly, you may change the colors of the first levels and the last link as well by overriding the classes in Material CSS. For changing the color of the first level, change the color property in breadcrumb class. For the last link color, change the color in breadcrumb:last-child class as shown in the example below:
The CSS for this example:
<style>
.breadcrumb {
font-size: 18px;
color: #00ff00;
}
.breadcrumb:before {
color: #f4ff81;
}
.breadcrumb:last-child {
color: #a7ffeb ;
}
</style>