You are viewing an archived version of the MindSphere Design System website, version 1.7.4

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>
<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

ElementClassDescription
.breadcrumb .breadcrumb__item Or any tag with .is-current Visually styles the currently selected / active breadcrumb item.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top