Breadcrumbs

linkDefault Breacrumbs

Breadcrumbs should be used to help users navigate to inside pages and back out to high level pages easily.

HTML

<div class="design-preview">
    <div class="breadcrumb-nav">
        <nav aria-label="You are here:" role="navigation">
            <ul class="breadcrumbs">
                <li><a href="#">Nav Item</a></li>
                    <li><a href="#">Nav Item</a></li>
                    <li><a href="#">Nav Item</a></li>
                    <li>Current Nav Item</li>
                </ul>
            </nav>
        </div>
</div>

SCSS

.breadcrumb-nav li {
    text-transform: none;
    font-weight: 700;
    color: $purple;
}

.breadcrumb-nav a {
    font-weight: normal;
    color: $purple;
}

.breadcrumbs li:not(:last-child)::after {
    content: url('../images/Right-arrow-breadcrumb.svg');
}