Description
Breadcrumb is a secondary navigation pattern that identifies the page position inside a hierarchy.
Check the Lexicon Breadcrumbs Pattern for a more in-depth look at the motivations and proper usage of this component.
Breadcrumbs
A navigation aid for your site that provides a quick way to jump back to previously viewed pages or sections.
Use
<span class="breadcrumb-text-truncate"></span>inside breadcrumb links to truncate text based on a max-width.
Breadcrumb will use
$breadcrumb-divider-svg-icon by default, set $breadcrumb-divider-svg-icon: none; if you wish to use the UTF-8 charset or third-party icon font.
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#1" title="Home">
<span class="breadcrumb-text-truncate">Home</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#1" title="Components">
<span class="breadcrumb-text-truncate">Components</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#1" title="Breadcrumbs and Paginations">
<span class="breadcrumb-text-truncate">Breadcrumbs and Paginations</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#1" title="Page">
<span class="breadcrumb-text-truncate">Page</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#1" title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual">
<span class="breadcrumb-text-truncate">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span>
</a>
</li>
<li class="active breadcrumb-item">
<span class="breadcrumb-text-truncate" title="Active">Active</span>
</li>
</ol><ol class="breadcrumb">
<li class="breadcrumb-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="breadcrumb-link dropdown-toggle" data-toggle="dropdown" href="" id="breadcrumb2Dropdown1" role="button">
<svg class="lexicon-icon lexicon-icon-ellipsis-h" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#ellipsis-h"></use>
</svg>
<svg class="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#caret-bottom"></use>
</svg>
</a>
<div aria-labelledby="breadcrumb2Dropdown1" class="dropdown-menu">
<a class="dropdown-item" href="#1">Home</a>
<a class="dropdown-item" href="#1">Components</a>
<a class="dropdown-item" href="#1">Breadcrumbs and Paginations</a>
</div>
</li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#1" title="Page">
<span class="breadcrumb-text-truncate">Page</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#1" title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual">
<span class="breadcrumb-text-truncate">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span>
</a>
</li>
<li class="active breadcrumb-item">
<span class="breadcrumb-text-truncate" title="Active">Active</span>
</li>
</ol>