Overview
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.
Using this Component
-
Confirm that you have references to Fabric's CSS and JavaScript on your page:
<link rel="stylesheet" href="fabric.min.css" /> <link rel="stylesheet" href="fabric.components.min.css" /> <script src="fabric.min.js"></script>
-
Copy the HTML from one of the samples below into your page. For example:
<div class="ms-Breadcrumb"> <div class="ms-Breadcrumb-overflow"> <div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More"></div> <div class="ms-Breadcrumb-overflowMenu"> <ul class="ms-ContextualMenu is-open"></ul> </div> <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i> </div> <ul class="ms-Breadcrumb-list"> <li class="ms-Breadcrumb-listItem"> <a class="ms-Breadcrumb-itemLink">Files</a> <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i> </li> <li class="ms-Breadcrumb-listItem"> <a class="ms-Breadcrumb-itemLink">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">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">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">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">Folder 5</a> <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i> </li> <li class="ms-Breadcrumb-listItem"> <a class="ms-Breadcrumb-itemLink">Folder 6</a> <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i> </li> <li class="ms-Breadcrumb-listItem"> <a class="ms-Breadcrumb-itemLink">Folder 7</a> <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i> </li> </ul> </div>
-
Add the following
<script>
tag to your page, below the references to Fabric's JS, to instantiate all Breadcrumb components on the page:<script type="text/javascript"> var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb'); var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML); </script>
-
Replace the sample HTML content with your content.
Variants
<div class="ms-Breadcrumb">
<div class="ms-Breadcrumb-overflow">
<div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More"></div>
<div class="ms-Breadcrumb-overflowMenu">
<ul class="ms-ContextualMenu is-open"></ul>
</div>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
</div>
<ul class="ms-Breadcrumb-list">
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink">Files</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink">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">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">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">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">Folder 5</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink">Folder 6</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
</li>
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink">Folder 7</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
</li>
</ul>
</div>
<script type="text/javascript">
var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
</script>
States
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.
|
Methods
Name | Parameters | Description |
---|---|---|
removeOutlinesOnClick() |
None |
Removes focus outlines so they don't linger after click
|
addItem(itemLabel, itemLink) |
itemLabel: {String} the item's text label itemLink: {String} the item's href link |
Adds a breadcrumb item to a breadcrumb
|
removeItemByLabel(itemLabel) |
itemLabel: {String} the item's text label |
Removes a breadcrumb item by item label in the breadcrumbs list
|
removeItemByPosition(value) |
value: {number} the item's index |
Removes a breadcrumb item by position in the breadcrumb's list. Index starts at 0
|
init() |
None |
Initializes component
|