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.

ContextualMenu

Overview

ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.

There are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.

Organize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.

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-ContextualMenuExample">
  <button class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">Open Example</span> 
  </button>
  <ul class="ms-ContextualMenu is-hidden">
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Animals</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Books</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Education</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Music</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Sports</a> 
    </li>
  </ul>
</div>

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

<script type="text/javascript">
  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
  for (var i = 0; i < ContextualMenuElements.length; i++) {
    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
  }
</script>

Replace the sample HTML content with your content.

Variants

Default ContextualMenu

<div class="ms-ContextualMenuExample">
  <button class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">Open Example</span> 
  </button>
  <ul class="ms-ContextualMenu is-hidden">
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Animals</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Books</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Education</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Music</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Sports</a> 
    </li>
  </ul>
</div>

<script type="text/javascript">
  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
  for (var i = 0; i < ContextualMenuElements.length; i++) {
    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
  }
</script>

Animals
Books
Education
Music
Sports

Multiselect ContextualMenu

<div class="ms-ContextualMenuExample">
  <button class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">Open Example</span> 
  </button>
  <ul class="ms-ContextualMenu is-hidden ms-ContextualMenu--multiselect">
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--header">SORT BY</li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Date</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Sender</a> 
    </li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--header">ORDER</li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Newest on top</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Oldest on top</a> 
    </li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--header">CONVERSATIONS</li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">On</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Off</a> 
    </li>
  </ul>
</div>

<script type="text/javascript">
  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
  for (var i = 0; i < ContextualMenuElements.length; i++) {
    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
  }
</script>

SORT BY
Date
Sender
ORDER
Newest on top
Oldest on top
CONVERSATIONS
On
Off

Submenu ContextualMenu

<div class="ms-ContextualMenuExample">
  <button class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">Open Example</span> 
  </button>
  <ul class="ms-ContextualMenu is-hidden">
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Animals</a> 
    </li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--hasMenu">
      <a class="ms-ContextualMenu-link" tabindex="1">Books</a> 
      <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--ChevronRight"></i>
      <ul class="ms-ContextualMenu is-hidden">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Fiction</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Humor</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link is-selected" tabindex="1">Magazines</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Non-fiction</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Textbooks</a> 
        </li>
      </ul>
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Education</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Music</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Sports</a> 
    </li>
  </ul>
</div>

<script type="text/javascript">
  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
  for (var i = 0; i < ContextualMenuElements.length; i++) {
    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
  }
</script>

Animals
Books
- Fiction
- Humor
- Magazines
- Non-fiction
- Textbooks
Education
Music
Sports

Dividers ContextualMenu

<div class="ms-ContextualMenuExample">
  <button class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">Open Example</span> 
  </button>
  <ul class="ms-ContextualMenu is-hidden">
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Delete</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
    </li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Important</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Move</a> 
    </li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--hasMenu">
      <a class="ms-ContextualMenu-link" tabindex="1">Move</a> 
      <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--ChevronRight"></i>
      <ul class="ms-ContextualMenu is-hidden">
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Fiction</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Humor</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link is-selected" tabindex="1">Magazines</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Non-fiction</a> 
        </li>
        <li class="ms-ContextualMenu-item">
          <a class="ms-ContextualMenu-link" tabindex="1">Textbooks</a> 
        </li>
      </ul>
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Create Rule...</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Verdana</a> 
    </li>
  </ul>
</div>

<script type="text/javascript">
  var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenuExample");
  for (var i = 0; i < ContextualMenuElements.length; i++) {
    var ButtonElement = ContextualMenuElements[i].querySelector(".ms-Button");
    var ContextualMenuElement = ContextualMenuElements[i].querySelector(".ms-ContextualMenu");
    new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
  }
</script>

Delete
Flag
Important
Move
Move
- Fiction
- Humor
- Magazines
- Non-fiction
- Textbooks
Create Rule...
Verdana

States

State	Applied to	Result
.is-open	.ms-ContextualMenu	The ContextualMenu is hidden by default. Toggle this class to show or hide it.
.is-selected	.ms-ContextualMenu-link	Marks that item as selected. Only available for the multiselect variant.
.is-disabled	.ms-ContextualMenu-link	Disables that item in the menu.