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
Element | Class | Description |
---|---|---|
.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. |