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.

Pivot

Overview

The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more content views and relies on text headers to articulate the different sections of content.

  • Tapping on a pivot item header navigates to that header's section content.
  • Swiping left or right on a pivot item header navigates to the adjacent section.
  • Swiping left or right on section content navigates to the adjacent section.
  • Pivots are stationary when all pivot headers fit within the allowed space.
  • Pivots carousel when all pivot headers don't fit within the allowed space.

Tabs are a visual variant of Pivot that use a combination of icons and text or just icons to articulate section content.

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-Pivot">
  <ul class="ms-Pivot-links">
    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
      My files
    </li>
    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
      Recent
    </li>
    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
      Shared with me
    </li>
    <li class="ms-Pivot-link" tabindex="1">
      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
    </li>
  </ul>
  <div class="ms-Pivot-content" data-content="files">
    This is the my files tab.
  </div>
  <div class="ms-Pivot-content" data-content="recent">
    This is the recent tab.
  </div>
  <div class="ms-Pivot-content" data-content="shared">
    This is the shared with me tab.
  </div>
</div>

  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Pivot components on the page:

    <script type="text/javascript">
  var PivotElements = document.querySelectorAll(".ms-Pivot");
  for (var i = 0; i < PivotElements.length; i++) {
    new fabric['Pivot'](PivotElements[i]);
  }
</script>

  4. Replace the sample HTML content with your content.

Variants

Default Pivot 
<div class="ms-Pivot">
  <ul class="ms-Pivot-links">
    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
      My files
    </li>
    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
      Recent
    </li>
    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
      Shared with me
    </li>
    <li class="ms-Pivot-link" tabindex="1">
      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
    </li>
  </ul>
  <div class="ms-Pivot-content" data-content="files">
    This is the my files tab.
  </div>
  <div class="ms-Pivot-content" data-content="recent">
    This is the recent tab.
  </div>
  <div class="ms-Pivot-content" data-content="shared">
    This is the shared with me tab.
  </div>
</div>
<script type="text/javascript">
  var PivotElements = document.querySelectorAll(".ms-Pivot");
  for (var i = 0; i < PivotElements.length; i++) {
    new fabric['Pivot'](PivotElements[i]);
  }
</script>
  • My files
  • Recent
  • Shared with me
This is the my files tab.
This is the recent tab.
This is the shared with me tab.
Large Pivot 
<div class="ms-Pivot ms-Pivot--large">
  <ul class="ms-Pivot-links">
    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
      My files
    </li>
    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
      Recent
    </li>
    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
      Shared with me
    </li>
    <li class="ms-Pivot-link" tabindex="1">
      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
    </li>
  </ul>
  <div class="ms-Pivot-content" data-content="files">
    This is the my files tab.
  </div>
  <div class="ms-Pivot-content" data-content="recent">
    This is the recent tab.
  </div>
  <div class="ms-Pivot-content" data-content="shared">
    This is the shared with me tab.
  </div>
</div>
<script type="text/javascript">
  var PivotElements = document.querySelectorAll(".ms-Pivot");
  for (var i = 0; i < PivotElements.length; i++) {
    new fabric['Pivot'](PivotElements[i]);
  }
</script>
  • My files
  • Recent
  • Shared with me
This is the my files tab.
This is the recent tab.
This is the shared with me tab.
Tabs Pivot 
<div class="ms-Pivot ms-Pivot--tabs">
  <ul class="ms-Pivot-links">
    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
      My files
    </li>
    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
      Recent
    </li>
    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
      Shared with me
    </li>
    <li class="ms-Pivot-link" tabindex="1">
      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
    </li>
  </ul>
  <div class="ms-Pivot-content" data-content="files">
    This is the my files tab.
  </div>
  <div class="ms-Pivot-content" data-content="recent">
    This is the recent tab.
  </div>
  <div class="ms-Pivot-content" data-content="shared">
    This is the shared with me tab.
  </div>
</div>
<script type="text/javascript">
  var PivotElements = document.querySelectorAll(".ms-Pivot");
  for (var i = 0; i < PivotElements.length; i++) {
    new fabric['Pivot'](PivotElements[i]);
  }
</script>
  • My files
  • Recent
  • Shared with me
This is the my files tab.
This is the recent tab.
This is the shared with me tab.
Large Tabs Pivot 
<div class="ms-Pivot ms-Pivot--large ms-Pivot--tabs">
  <ul class="ms-Pivot-links">
    <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
      My files
    </li>
    <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
      Recent
    </li>
    <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
      Shared with me
    </li>
    <li class="ms-Pivot-link" tabindex="1">
      <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
    </li>
  </ul>
  <div class="ms-Pivot-content" data-content="files">
    This is the my files tab.
  </div>
  <div class="ms-Pivot-content" data-content="recent">
    This is the recent tab.
  </div>
  <div class="ms-Pivot-content" data-content="shared">
    This is the shared with me tab.
  </div>
</div>
<script type="text/javascript">
  var PivotElements = document.querySelectorAll(".ms-Pivot");
  for (var i = 0; i < PivotElements.length; i++) {
    new fabric['Pivot'](PivotElements[i]);
  }
</script>
  • My files
  • Recent
  • Shared with me
This is the my files tab.
This is the recent tab.
This is the shared with me tab.