Skip to main content

Action menu

An action menu is used to present a set of actions, tools, or operations to the user. Action menu is ideal for use in scenarios where the user needs to organize data, such as applying a specific label to a bunch of selected items in the table or exporting selected items to a spreadsheet.

Example

Action menu on the default theme

Best practices

Action menu is often used in conjunction with Action bar and the menu trigger can be either, primary, secondary, or glyph-only Action triggers. It should not be confused with Select, which provides the user a simple list of items to select from as opposed to performing actions or operations on a given set of data. Another distinction between them is that Action menu is only to be used outside of form elements.

Do

  • Group menu items together through the use of dividers - this makes the contents easier to parse. Examples of menu groups: Font, Color, and Alignment.
  • Use glyphs to visualize the action in addition to the text label. Ensure that your glyphs confirm to the Microsoft design language guidance.
  • Items that lead into a dialog, modal window or pop out experience of any kind should end with "...". For example, if a menu item triggers a dialog, the copy should read "Settings..." and not "Settings".
  • Use action menu with check box to apply actions or properties which can be toggled between two states. Be cognizant of concurrent actions which can be applied simultaneously, such as common text styling options (bold, italics, underline, etc.)

Don’t

  • Don’t use Action menu inside form elements, use the Select component instead.
  • Don't use divider lines for anything other than bucketing relevant items together. Avoid the "stripe effect" caused by overuse of dividers. If there are several items within the menu, either break it up into two or more menu items or use a deeper level cascading menu to expose any child items.
  • Don't use checkbox functionality for radio style selections where only a single item from a given set can apply at a time. Scenarios like these may be subject to additional accessibility requirements which are currently not addressed through action menu.

Also known as

Application menu
Actions drop-down

Related

Action trigger
Action toggle
Action bar
Select menu (Deprecated)

Accessibility

  • For list items within an action menu, a role of either menuitem or menuitemcheckbox is required.
  • menuitemcheckbox: A menuitem with a checkable state whose possible values are true, false, or mixed. The aria-checked attribute of a menuitemcheckbox indicates whether the menu item is checked (true), unchecked (false)
  • aria-disabled: used to disable menu items in an action menu

Options

Checkbox - To enable checkbox functionality, use role="menuitemcheckbox" for the list item.

Development

  • Schema definition: The action-menu schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Action menu with action trigger

<div class="c-action-menu">
    <button class="c-action-trigger" aria-haspopup="true" id="fooBar" aria-expanded="false">Actions</button>
    <ul class="c-context-menu" role="menu">
        <li role="menuitem" id="exampleId1" class="f-context-action-trigger">
            <span class="c-glyph glyph-edit">Lorem ipsum 1</span>
        </li>
        <li role="menuitem" id="exampleId2" class="f-context-action-trigger">
            <span class="c-glyph glyph-phone">Lorem ipsum 2</span>
        </li>
        <li role="menuitem" id="exampleId3" class="f-context-action-trigger">
            <span class="c-glyph glyph-info">Lorem ipsum 3</span>
        </li>
        <li role="menuitem" id="exampleId4" class="f-context-action-trigger">
            <span class="c-glyph glyph-mail">Lorem ipsum 4</span>
        </li>
    </ul>
</div>

Action menu with action trigger checkboxes

<div class="c-action-menu">
    <button class="c-action-trigger" aria-haspopup="true" id="fooBar" aria-expanded="false">Actions (Checkbox)</button>
    <ul class="c-context-menu" role="menu">
        <li role="menuitemcheckbox" id="checkboxId1" class="f-context-action-trigger">
            <span class="c-glyph glyph-edit">Lorem ipsum checkbox 1</span>
        </li>
        <li role="menuitemcheckbox" id="checkboxId2" class="f-context-action-trigger" aria-checked="true">
            <span class="c-glyph glyph-add">Lorem ipsum checkbox 2</span>
        </li>
        <li role="menuitemcheckbox" id="checkboxId3" class="f-context-action-trigger">
            <span class="c-glyph glyph-delete">Lorem ipsum checkbox 3</span>
        </li>
        <li role="menuitemcheckbox" id="checkboxId4" class="f-context-action-trigger" aria-checked="true">
            <span class="c-glyph glyph-share">Lorem ipsum checkbox 4</span>
        </li>
    </ul>
</div>

Action menu with text-only

<div class="c-action-menu">
    <button class="c-action-trigger" aria-haspopup="true" id="barBaz" aria-expanded="false">Text Only</button>
    <ul class="c-context-menu" role="menu">
        <li role="menuitem" id="exampleId5" class="f-context-text-only">
            <span>Lorem ipsum 1</span>
        </li>
        <li role="menuitem" id="exampleId6" class="f-context-text-only">
            <span>Lorem ipsum 2</span>
        </li>
        <li role="menuitem" id="exampleId7" class="f-context-text-only">
            <span>Lorem ipsum 3</span>
        </li>
        <li role="menuitem" id="exampleId8" class="f-context-text-only">
            <span>Lorem ipsum 4</span>
        </li>
    </ul>
</div>

Action menu with text only checkboxes

<div class="c-action-menu">
    <button class="c-action-trigger" aria-haspopup="true" id="checkboxesText" aria-expanded="false">Text Only (Checkbox)</button>
    <ul class="c-context-menu" role="menu">
        <li role="menuitemcheckbox" id="checkboxId5" class="f-context-text-only">
            <span>Lorem ipsum checkbox 1</span>
        </li>
        <li role="menuitemcheckbox" id="checkboxId6" class="f-context-text-only" aria-checked="true">
            <span>Lorem ipsum checkbox 2</span>
        </li>
        <li role="menuitemcheckbox" id="checkboxId7" class="f-context-text-only" aria-disabled="true">
            <span>Lorem ipsum checkbox 3</span>
        </li>
        <li role="menuitemcheckbox" id="checkboxId8" class="f-context-text-only">
            <span>Lorem ipsum checkbox 4</span>
        </li>
    </ul>
</div>

Action menu with mixed content

<div class="c-action-menu">
    <button class="c-action-trigger" aria-haspopup="true" id="fooBarBaz" aria-expanded="false">Mixed content</button>
    <ul class="c-context-menu" role="menu">
        <li role="menuitem" id="exampleId13" class="f-context-action-trigger">
            <span class="c-glyph glyph-mail">Lorem ipsum 1</span>
        </li>
        <li role="menuitem" id="exampleId14" class="f-context-action-trigger">
            <span class="c-glyph glyph-phone">Lorem ipsum 2</span>
        </li>
        <li role="menuitem" id="exampleId15" class="f-context-action-trigger f-divider">
            <span class="c-glyph glyph-info">Lorem ipsum 3</span>
        </li>
        <li role="menuitem" id="exampleId16" class="f-context-text-only" aria-disabled="true">
            <span>Lorem ipsum 4 (disabled)</span>
        </li>
        <li role="menuitem" id="exampleId17" class="f-context-text-only">
            <span>Lorem ipsum 5</span>
        </li>
    </ul>
</div>

Disabled action menu

<div class="c-action-menu">
    <button class="c-action-trigger" aria-haspopup="true" id="fooBaz" aria-expanded="false" disabled="disabled">Disabled</button>
    <ul class="c-context-menu" role="menu" aria-disabled="true">
        <li role="menuitem" id="exampleId9" class="f-context-text-only">
            <span>Lorem ipsum 1</span>
        </li>
        <li role="menuitem" id="exampleId10" class="f-context-text-only">
            <span>Lorem ipsum 2</span>
        </li>
        <li role="menuitem" id="exampleId11" class="f-context-text-only">
            <span>Lorem ipsum 3</span>
        </li>
        <li role="menuitem" id="exampleId12" class="f-context-text-only">
            <span>Lorem ipsum 4</span>
        </li>
    </ul>
</div>