Breadcrumbs are used as a secondary navigation, to reveal the users location on the website, usually when a deeper hierarchical structure is in place.

Breadcrumb Example:

Sass Configuration:

Name Type Default Description
$breadcrumb-padding String 8px 15px Set the padding of the breadcrumb list in the container
$breadcrumb-size Number $small-size Set size of breadcrumb elements
$breadcrumb-radius Boolean $true Do you want a radius on the breadcrumb background?
$breadcrumb-bg-colors Color palette(secondary, light) Define color of breadcrumb background
$breadcrumb-seperator-color Color #ccc Define color of breadcrumb seperators
$breadcrumb-active-color Color #777 Define color of active breadcrumb elements
$breadcrumb-seperator String ">" Set the breadcrumb seperator character

Example Code:

<!-- Breadcrumb List: -->
<ul class="breadcrumb">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="active">Current Item</li>
</ul>