The purpose of breadcrumbs

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.

An example of Materialize breadcrumbs

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:

See online demo and code

The code:

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:

See online demo and code

The CSS to be used after the reference of Materialize CSS:

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:

See online demo and code

The CSS for this example:

Grab the complete code from the example page.