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.

CommandBar

Overview

CommandBar is a surface that houses commands that operate on the content of the window, panel, or parent region it resides above. They are one of the most visible and recognizable ways to surface commands, and can be an intuitive method for interacting with content on the page. However, if overloaded or poorly organized, they can be difficult to use and hide valuable commands from your user. CommandBars can also display a search box for finding content; hold simple commands as well as menus; and display the status of ongoing actions.

Commands should be sorted in order of importance, from left to right or right to left depending on the culture. Secondarily, organize commands in logical groupings for easier recall. CommandBars work best when they display no more than 5-7 commands. This helps users quickly find your most valuable features. If you need to show more commands, consider using the overflow menu. If you need to render status, or viewing controls, these go on the right side of the CommandBar (or left side if in a left to right experience). Do not display more than 2-3 items on the right side as it will make the overall CommandBar difficult to parse.

All command items should have an icon and a label. Commands can render as labels only as well. In smaller widths, commands can just use icon only, but only for the most recognizable and frequently used commands. All other commands should go into an overflow where text labels can be shown.

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-CommandBar">
  <div class="ms-CommandBar-sideCommands">
    <div class="ms-CommandButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
    </div>
  </div>
  <div class="ms-CommandBar-mainArea">
    <div class="ms-SearchBox ms-SearchBox--commandBar">
      <input class="ms-SearchBox-field" type="text" value="">
      <label class="ms-SearchBox-label">
        <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
        <span class="ms-SearchBox-text">Search</span> 
      </label>
      <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Cancel"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
      <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
      <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">New</span> 
        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--Folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--Page"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
          <i class="ms-Icon ms-Icon--Coffee"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--Picture"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--Folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--Page"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
          <i class="ms-Icon ms-Icon--Coffee"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--Picture"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
  </div>
</div>

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

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

Replace the sample HTML content with your content.

Variants

Default CommandBar

<div class="ms-CommandBar">
  <div class="ms-CommandBar-sideCommands">
    <div class="ms-CommandButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
    </div>
  </div>
  <div class="ms-CommandBar-mainArea">
    <div class="ms-SearchBox ms-SearchBox--commandBar">
      <input class="ms-SearchBox-field" type="text" value="">
      <label class="ms-SearchBox-label">
        <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
        <span class="ms-SearchBox-text">Search</span> 
      </label>
      <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Cancel"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
      <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
      <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">New</span> 
        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--Folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--Page"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
          <i class="ms-Icon ms-Icon--Coffee"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--Picture"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--Folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--Page"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
          <i class="ms-Icon ms-Icon--Coffee"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--Picture"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
  </div>
</div>

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

Folder
Plain Text Document
A Coffee
Picture
Money

Folder
Plain Text Document
A Coffee
Picture
Money

Dropdown CommandBar

<div class="ms-CommandBar">
  <div class="ms-CommandBar-mainArea">
    <div class="ms-CommandButton ms-CommandButton--actionButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--GlobalNavButton"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
    </div>
    <div class="ms-CommandButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--Search"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Reply</span> 
      </button>
      <button class="ms-CommandButton-splitIcon">
        <i class="ms-Icon ms-Icon--ChevronDown"></i>
      </button>
      <ul class="ms-ContextualMenu is-opened">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Reply</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Reply all</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link is-selected" tabindex="1">Forward</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Delete</a> 
        </li>
      </ul>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--document"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">A Dog</a> 
          <i class="ms-Icon ms-Icon--dogAlt"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--sun"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
  </div>
</div>

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

Reply
Reply all
Forward
Flag
Delete

Folder
Plain Text Document
A Dog
Picture
Money

Navbar CommandBar

<div class="ms-CommandBar ms-CommandBar--navBar">
  <div class="ms-CommandBar-sideCommands">
    <div class="ms-CommandButton ms-CommandButton--dropdown">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--Settings"></i></span> 
        <span class="ms-CommandButton-label">Show photos from</span> 
        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--Folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--Document"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
          <i class="ms-Icon ms-Icon--Coffee"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--Picture"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
    <div class="ms-CommandButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--Info"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
    </div>
  </div>
  <div class="ms-CommandBar-mainArea">
    <div class="ms-SearchBox ms-SearchBox--commandBar">
      <input class="ms-SearchBox-field" type="text" value="">
      <label class="ms-SearchBox-label">
        <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
        <span class="ms-SearchBox-text">Search photos</span> 
      </label>
      <div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Cancel"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
      <div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--ChromeBack"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
      <div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel">
        <button class="ms-CommandButton-button">
          <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--Filter"></i></span> 
          <span class="ms-CommandButton-label"></span> 
        </button>
      </div>
    </div>
    <div class="ms-CommandButton ms-CommandButton--pivot is-active">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-label">All Photos</span> 
        <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--Folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--Document"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Coffee</a> 
          <i class="ms-Icon ms-Icon--Coffee"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--Picture"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
    <div class="ms-CommandButton ms-CommandButton--pivot">
      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">Albums</span>  </a> 
    </div>
    <div class="ms-CommandButton ms-CommandButton--pivot">
      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">Tags</span>  </a> 
    </div>
    <div class="ms-CommandButton ms-CommandButton--pivot">
      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">Places</span>  </a> 
    </div>
    <div class="ms-CommandButton ms-CommandButton--pivot">
      <a class="ms-CommandButton-button"> <span class="ms-CommandButton-label">People</span>  </a> 
    </div>
    <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon"><i class="ms-Icon ms-Icon--More"></i></span> 
        <span class="ms-CommandButton-label"></span> 
      </button>
      <ul class="ms-ContextualMenu is-opened">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
          <i class="ms-Icon ms-Icon--Folder"></i>
        </li>
        <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
          <i class="ms-Icon ms-Icon--Document"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">A Coffee</a> 
          <i class="ms-Icon ms-Icon--Coffee"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Picture</a> 
          <i class="ms-Icon ms-Icon--Picture"></i>
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
          <i class="ms-Icon ms-Icon--Money"></i>
        </li>
      </ul>
    </div>
  </div>
</div>

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

States

State	Applied to	Result
`.is-hidden`	`.ms-CommandBarItem`	Hides a Command Bar item from view.
`.is-active`	`.ms-CommandBarSearch`	Expands the search field for use.