Breadcrumb

Easily indicate the current location of a user within a websites hierarchy with our breadcrumb component.

Usage

Breadcrumbs are a secondary navigation screen which allows users to see clearly where they are in the website heirarchy.

Notation:

In order to use breadcrumbs with mesh you need to wrap the parent with a breadcrumb class, and child (breadcrumb items) to have the breadcrumbs-item class.
Be sure to add the active class to the page where the user currently is. This will give the link a color of rgba(0, 0, 0, 0.5);
The default breadcrumb class uses forward slashes as it's separator. You can attach colors to the breadcrumb container by using our color utility classes.
Note: It is recommended you use the </ul> and </li> semantic tags with breadcrumbs.

<ul class="breadcrumb bg-light c-primary">
    <li class="breadcrumb-item"><a href="#">Nav item</a></li>
    <li class="breadcrumb-item"><a href="#">Nav item</a></li>
    <li class="breadcrumb-item active"><a href="#">Active nav item</a></li>
</ul>

Arrows

You can also change the default slashes to arrows by adding the breadcrumb-arrow class to the parent, in conjunction with breadcrumb.

<ul class="breadcrumb breadcrumb-arrow bg-primary c-white">
    <li class="breadcrumb-item"><a href="#">Nav item</a></li>
    <li class="breadcrumb-item"><a href="#">Nav item</a></li>
    <li class="breadcrumb-item active"><a href="#">Active nav item</a></li>
</ul>

Variables

Variable	Value	Description
`$breadcrumb-active-color: rgba(0, 0, 0, 0.5);`	Color	Change the breadcrumb active link color via this variable.