Breadcrumb enables users to quickly see their location within a path of navigation and move up to a parent level if desired.
Breadcrumb
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb">
<div class="bx--breadcrumb-item">
<a href="#" class="bx--link">Breadcrumb 1</a>
</div>
<div class="bx--breadcrumb-item">
<a href="#" class="bx--link">Breadcrumb 2</a>
</div>
<div class="bx--breadcrumb-item">
<a href="#" class="bx--link">Breadcrumb 3</a>
</div>
</nav>
Documentation
FAQ
How to remove a breadcrumb-item slash
Use CSS to override breadcrumb styles to hide any unwanted slashes.
Slashes are created using CSS pseudo elements (::after
).
Setting this to display: none
will remove the associated slash.
/* Removes the slash from the last breadcrumb-item */
.bx--breadcrumb-item:last-child::after {
display: none;
}
Or you can add .bx--breadcrumb--no-trailing-slash
to .bx--breadcrumb
to remove leading slashes.
/* Removes the slash from the last breadcrumb-item */
<div class="bx--breadcrumb bx--breadcrumb--no-trailing-slash">
<div class="bx--breadcrumb-item"><a href="#" class="bx--link">Breadcrumb 1</a></div>
<div class="bx--breadcrumb-item"><a href="#" class="bx--link">Breadcrumb 2</a></div>
<div class="bx--breadcrumb-item"><span>Breadcrumb 3</span></div>
</div>