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

Breadcrumb

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

To see a detailed explanation of all existing helper and size classes, please refer to the usage table below.

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>

Breadcrumb overflow variants

<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">
        <a href="#">Breadcrumb 4</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 5</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 6</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 7</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb X</a>
    </div>
</div>

<div class="breadcrumb breadcrumb--centered">
    <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">
        <a href="#">Breadcrumb 4</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 5</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 6</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 7</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb X</a>
    </div>
</div>

<div class="breadcrumb breadcrumb--right">
    <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">
        <a href="#">Breadcrumb 4</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 5</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 6</a>
    </div>
    <div class="breadcrumb__item">
        <a href="#">Breadcrumb 7</a>
    </div>
    <div class="breadcrumb__item is-current">
        <a href="#">Breadcrumb X</a>
    </div>
</div>

Usage

ElementClassDescription
.breadcrumb .breadcrumb__item Or any tag with .is-current Visually styles the currently selected / active breadcrumb item.
.breadcrumb .breadcrumb--centered "Cuts off" the breadcrumbs item between first and last breadcrumb item, shortened with ellipsis.
.breadcrumb .breadcrumb--right "Cuts off" the breadcrumbs item on the right, shortened with ellipsis.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top