Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
UsageNg Breadcrumb
Use an ordered or unordered list with linked list items to create a minimally styled Breadcrumb. Use our utilities to add additional styles as desired.
<nav aria-label="Breadcrumb">
<ol class="Breadcrumb">
<li class="Breadcrumb-item Active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="Breadcrumb">
<ol class="Breadcrumb">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="Breadcrumb">
<ol class="Breadcrumb">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Library</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Data</li>
</ol>
</nav>
Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --ls-breadcrumb-divider, or through the $Breadcrumb-divider.
<nav aria-label="Breadcrumb" style="--ls-breadcrumb-divider: '''>''';">
<ol class="Breadcrumb">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Library</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Data</li>
</ol>
</nav>
When modifying via Sass, the quote function is required to generate the quotes around a string. For example, using > as the divider, you can use this:
$Breadcrumb-divider: quote("›");
It’s also possible to use an embedded SVG icon:
<nav aria-label="Breadcrumb"
style="--ls-breadcrumb-divider: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxwYXRoIGQ9J00yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eicgZmlsbD0nY3VycmVudENvbG9yJy8+PC9zdmc+');">
<ol class="Breadcrumb">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Library</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Data</li>
</ol>
</nav>
You can also remove the divider setting --ls-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $Breadcrumb-divider: none;.
<nav aria-label="Breadcrumb" style="--ls-breadcrumb-divider: ''">
<ol class="Breadcrumb">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Library</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Data</li>
</ol>
</nav>
With border, shadow and thicker padding breadcrumb version. Also using svg image as mask-image for divider. Use .Breadcrumb class, followed by one of the contextual classes Breadcrumb-regular, .Breadcrumb-larger or .Breadcrumb-vertical to use this style.
<nav aria-label="Breadcrumb">
<ol class="Breadcrumb Breadcrumb-regular">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Library</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="Breadcrumb">
<ol class="Breadcrumb Breadcrumb-larger">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Library</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="Breadcrumb">
<ol class="Breadcrumb Breadcrumb-vertical">
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Home</a></li>
<li class="Breadcrumb-item"><a class="Breadcrumb-Link" href="#">Library</a></li>
<li class="Breadcrumb-item Active" aria-current="page">Data</li>
</ol>
</nav>
$Breadcrumb-font-family : $Font-family-base !default;
$Breadcrumb-font-size : null;
$Breadcrumb-bg : $Adaptive-bg-surface;
$Breadcrumb-color : $Adaptive-fg-surface;
$Breadcrumb-border : none;
$Breadcrumb-border-radius : 0;
$Breadcrumb-margin-bottom : .50rem;
$Breadcrumb-padding-y : .25rem;
$Breadcrumb-padding-x : .25rem;
$Breadcrumb-item-padding-x : .5rem !default;
$Breadcrumb-link-padding : .25rem;
$Breadcrumb-divider : quote("/");
$Breadcrumb-divider-color : $Adaptive-bg-accent;
$Breadcrumb-hover-bg : hsla($Adaptive-bg-accent-hsl, .01);
$Breadcrumb-hover-border-color : hsla($Adaptive-bg-accent-hsl, .25);
$Breadcrumb-active-color : inherit;
$Breadcrumb-preset-default-icon-bg : "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'><polygon fill='currentColor' points='7.75 6.72 6.73 5.63 6.48 5.35 6.22 5.08 1.52 0 0 1.65 4.7 6.72 4.95 7 4.7 7.28 0 12.35 1.52 14 6.22 8.92 6.48 8.65 6.73 8.37 7.75 7.28 8 7 7.75 6.72'/></svg>";
$Breadcrumb-preset-larger-icon-bg : "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 28'><polygon fill='currentColor' points='11.62 13.45 10.1 11.26 9.71 10.71 9.33 10.16 2.29 0 0 3.29 7.05 13.45 7.43 14 7.05 14.55 0 24.71 2.29 28 9.33 17.84 9.71 17.29 10.1 16.75 11.62 14.55 12 14 11.62 13.45'/></svg>";
$Breadcrumb-preset-vertical-icon-bg : "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.5 16'><path fill='currentColor' d='M1.5,15c0,.55-.34,1-.75,1S0,15.55,0,15V1C0,.45.34,0,.75,0s.75.45.75,1Z'/></svg>";
$Breadcrumb-preset-icon-opacity : .75;
$Breadcrumb-preset-border : $Border;
$Breadcrumb-preset-border-radius : $Border-radius;
$Breadcrumb-preset-shadow : $Shadow;