Breadcrumb - Office UI Fabric JS

Office UI Fabric JS

Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.

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

Default Breadcrumb

<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