Guidelines for context menus
The context menu is a lightweight menu that provides the user with instant actions, and can be filled with custom commands. Context menus can be dismissed by tapping or clicking somewhere outside the menu.
Context menus can be used for:
- Contextual actions on text selections, such as Copy, Cut, Paste, Check Spelling, and so on.
- Clipboard commands.
- Custom commands.
- Commands for an object that must be acted upon but that can't be selected or otherwise indicated.
Here's a typical single-pane context menu. This would be used for a shorter list of simple commands. Use separators as needed to group similar commands.
A cascading context menu would be used for a more comprehensive collection of commands. It features one flyout level and can scroll. Use separators as needed to group similar commands.
- Use a separator between groups of commands in a context menu to:
- Distinguish groups of related commands.
- Group together sets of commands.
- Divide a predictable set of commands, such as clipboard commands (Cut / Copy / Paste), from app-specific or view-specific commands.
- On laptops and desktops, context menus and tooltips aren't limited to the application window and can paint outside of it. If the app tries to render a context menu completely outside of its window, an exception will be thrown.
- Keep context menu commands short. Longer commands end up being truncated.
- Use sentence capitalization for each command name.
- In any context menu, show the fewest possible number of commands.
- If direct manipulation of a UI element is possible, avoid placing that command within a context menu. A context menu should be reserved for contextual commands that aren't otherwise discoverable on-screen.