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.
- 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 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.
- For list items within an action menu, a role of either
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
Checkbox - To enable checkbox functionality, use
role="menuitemcheckbox" for the list item.
- Schema definition: The action-menu schema defines the acceptable configurations, requirements, and options for each component.