Skip to main content
Microsoft
Fabric-JS
Fabric-JS
  • Home
  • Get Started
    • Basic Inputs
      • Button
      • CheckBox
      • ChioceFieldGroup
      • CommandButton
      • ContextualMenu
      • Dropdown
      • Label
      • Link
      • TextField
      • Toggle
    • Content
      • FacePile
      • List
      • ListItem
      • OrgChart
      • Persona
      • Table
    • Navigation
      • Breadcrumb
      • CommandBar
      • Pivot
      • SearchBox
    • Pickers
      • DatePicker
      • PeoplePicker
    • Progress & Validation
      • MessageBar
      • MessageBanner
      • ProgressIndicator
      • Spinner
    • Surfaces
      • Callout
      • Dialog
      • Overlay
      • Panel
      • PersonaCard
      • Microsoft 365
      • Azure
      • Office 365
      • Dynamics 365
      • Power Platform
      • Windows 10
    • Products & Services
      • Windows Server
      • Enterprise Mobility + Security
      • Power BI
      • Teams
      • Visual Studio
      • Microsoft Advertising
    • Emerging Technologies
      • AI
      • Internet of Things
      • Azure Cognitive Services
      • Quantum
      • Microsoft HoloLens
      • Mixed Reality
    • Developer & IT
      • Docs
      • Developer Center
      • Windows Dev Center
      • Windows IT Pro Center
      • FastTrack
      • Power Platform
    • Partner
      • Partner Network
      • Solution Providers
      • Partner Center
      • Cloud Hosting
    • Industries
      • Education
      • Financial services
      • Government
      • Health
      • Manufacturing & resources
      • Retail
    • Other
      • Security
      • Licensing
      • AppSource
      • Azure Marketplace
      • Events
      • Research
    • View Sitemap
Sign in
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.
  • Breadcrumb
  • Button
  • Callout
  • CheckBox
  • ChoiceFieldGroup
  • CommandBar
  • CommandButton
  • ContextualMenu
  • DatePicker
  • Dialog
  • Dropdown
  • FacePile
  • Label
  • Link
  • List
  • ListItem
  • MessageBanner
  • MessageBar
  • OrgChart
  • Overlay
  • Panel
  • PeoplePicker
  • Persona
  • PersonaCard
  • Pivot
  • ProgressIndicator
  • SearchBox
  • Spinner
  • Table
  • TextField
  • Toggle

Breadcrumb

  • Overview
  • Using this Component
  • Variants
  • States
  • Methods

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.

Also available in Fabric React

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>
    • Files
    • Folder 1
    • Folder 2
    • Folder 3
    • Folder 4
    • Folder 5
    • Folder 6
    • Folder 7

    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
    Follow us
    Share this page
    What's new
    • Surface Laptop 4
    • Surface Laptop Go
    • Surface Go 2
    • Surface Pro X
    • Surface Duo
    • Microsoft 365
    • Windows 10 apps
    • HoloLens 2
    Microsoft Store
    • Account profile
    • Download Center
    • Microsoft Store support
    • Returns
    • Order tracking
    • Virtual workshops and training
    • Microsoft Store Promise
    • Financing
    Education
    • Microsoft in education
    • Office for students
    • Office 365 for schools
    • Deals for students & parents
    • Microsoft Azure in education
    Enterprise
    • Azure
    • AppSource
    • Automotive
    • Government
    • Healthcare
    • Manufacturing
    • Financial services
    • Retail
    Developer
    • Microsoft Visual Studio
    • Windows Dev Center
    • Developer Center
    • Microsoft developer program
    • Channel 9
    • Office Dev Center
    • Microsoft Garage
    Company
    • Careers
    • About Microsoft
    • Company news
    • Privacy at Microsoft
    • Investors
    • Diversity and inclusion
    • Accessibility
    • Security
    English (United States)
    • Sitemap
    • Contact Microsoft
    • Privacy
    • Manage cookies
    • Terms of use
    • Trademarks
    • Safety & eco
    • About our ads
    • © Microsoft 2021

    Sign in required


    Your session has expired. Please sign-in again to continue. Unfortunately any unsaved changes will be lost.

    Sign in