Breadcrumb

Breadcrumbs help you to understand and navigate through the hierarchy of the app and indicate the current location within the site's hierarchy.

Breadcrumb

<ul class="breadcrumb">
    <li class="breadcrumb__item">
        <a href="#">List Breadcrumb 1</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">List Breadcrumb 2</a>
    </li>
    <li class="breadcrumb__item">
        <a href="#">List Breadcrumb 3</a>
    </li>
    <li class="breadcrumb__item is-current">
        List Breadcrumb 4
    </li>
</ul>

Breadcrumb without list markup

<div class="breadcrumb">
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 1</a>
    </div>
    <div class="breadcrumb__item">
        Breadcrumb 2
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 3</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb 4</a>
    </div>
</div>

Usage

Element	Class	Description
`.breadcrumb .breadcrumb__item`	Or any tag with `.is-current`	Visually styles the currently selected / active breadcrumb item.

Breadcrumb (Patterns)