Shows the current location in a hierarchy and provides a means of navigating upward.
State | Applied to | Result |
---|---|---|
.is-overflow |
.ms-Breadcrumb |
Use this class to show an ellipsis, which opens a Contextual Menu of additional breadcrumbs. Without this class items that do not fit will be unavailable. |
.is-open |
.ms-Breadcrumb-overflowMenu |
Displays the overflow menu. |
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="jquery.fabric.min.js"></script>
</head>
<div class="ms-Breadcrumb">
<div class="ms-Breadcrumb-overflow">
<div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--ellipsis" tabindex="1"></div>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
<div class="ms-Breadcrumb-overflowMenu">
<ul class="ms-ContextualMenu is-open"></ul>
</div>
</div>
<ul class="ms-Breadcrumb-list">
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink" href="#" tabindex="2">Files</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink" href="#" tabindex="3">Folder 1</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink" href="#" tabindex="4">Folder 2</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink" href="#" tabindex="5">Folder 3</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink" href="#" tabindex="6">Folder 4</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink" href="#" tabindex="7">Folder 5</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
</li>
</ul>
</div>
<script>
tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Breadcrumbs on the page: <script>
var BreadCrumbHTML = document.querySelector('.ms-BreadCrumb');
var BreadCrumb = new fabric['.ms-BreadCrumb'](BreadCrumbHTML);
</script>
.ms-Breadcrumb-listItem
elements) with your content.This component uses a Contextual Menu for the overflow menu.
The component's JavaScript will apply the correct tabindex
values to ensure keyboard accessibility.