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

  1. 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>
    		
  2. 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>
  3. 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>
  4. 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