Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.
Do | Don't |
---|---|
Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page. | Don't use Breadcrumbs as a primary way to navigate an app or site. |
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>
$(document).ready(function() {
if (typeof fabric !== "undefined") {
if ('Breadcrumb' in fabric) {
var elements = document.querySelectorAll('.ms-Breadcrumb');
var i = elements.length;
var component;
while(i--) {
component = new fabric['Breadcrumb'](elements[i]);
}
}
}
});
</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.