Guidelines for context menus

Applies to Windows and Windows Phone

A sample of what a standard context menu control looks like

Description

A context menu is a lightweight menu that gives users immediate access to actions on text (like clipboard commands). The system provides apps with default context menus for text and hyperlinks. You can replace the default context menus with menus that show custom commands for text and hyperlinks.

Example

A screenshot that illustrates the standard context menu control

Dos and don'ts

  • Show custom commands. The system comes with default context menus for text and hyperlinks. Apps can replace these context menus with their own context menus. A custom command is appropriate to include in a context menu when it is not found in the app's toolbar and cannot be performed using direct interaction (like rotation).

    A context menu that shows custom commands.

  • Use a context menu to show clipboard commands (Cut, Copy, and Paste) for objects such as selected text. By default, the system shows Cut, Copy, and Paste commands for selected text. Common paste menu commands are Select All, Paste, and Undo. You can override these commands by showing a customized context menu. Where possible, mimic system behavior in your app by preserving the default commands.

    A context menu that shows the clipboard commands, Cut, Copy, and Paste.

  • Use the context menu to show commands for an object that needs to be acted upon but that can't be selected or otherwise indicated. For example: A chat conversation may not be appropriate to add selection to; in this case a context menu could make commands available for each message in a chat conversation.

    An image that shows what a context menu for an object that can't be selected.

  • Keep command names short. The context menu has a maximum width that equates to approximately 50 characters. When command names are too long, they are truncated automatically and an ellipse ("…") replaces the missing characters. Avoid truncation of your commands in the context menu by keeping command names short.

  • Use sentence capitalization for each command name. The first character of the command should be uppercase and all of the remaining characters should be lowercase.

  • Use a separator to distinguish groups of related commands. Use separators in the context menus to group sets of commands together. Use a separator to divide app-specific or view-specific commands from a predictable set of commands, such as clipboard commands, that are shown together.

  • Show the fewest number of commands possible, up to the six-command limit.

    If you're struggling to fit commands into the menu, ask yourself the following questions:

    • Can this command be represented with direct manipulation?
    • What would your user’s experience be like without this command?
    • Is this command accessible in another way? What value, if any, is gained by duplicating the command in the context menu?
    • Does the item have a page that represents it? If so, the command could be in the app bar or on the canvas on that page instead on the context menu in the collection.
    • Does this command always need to be shown, or only in certain contexts?
  • Order custom commands in the context menu by importance, with the most important commands at the bottom.

  • Order clipboard commands in the standard Cut, Copy, Paste order and place them at the bottom of the menu. If you want to show only two clipboard commands (for example, Cut and Paste) simply omit the unused command and otherwise preserve the order.

  • Position the context menu close to the object your user wants to act on. The context menu should be positioned close to the object or selection that it is acting on. When showing the context menu, provide a rectangle for the object that it will be acting on, and the context menu will position itself near it. By default, a context menu should be centered above the object that it is acting on.

    The default context menu for text, in the default position relative to an object rectangle.
  • Dismiss the context menu. Programmatically dismiss the context menu when the context it was shown for does not exist anymore. This can be done by using cancel in the standard async pattern.

  • Don't use item accelerators. Item accelerators cannot be used with context menu commands. Do not use ampersands (&) at the beginning of command names in your menu.

  • Don't show a command in a context menu unless it is contextually relevant to the selection or object. Note that the context menu does not have a disabled state; the context menu doesn’t appear if there are no commands in it. For example, if there is no text in the clipboard that can be pasted into text that the user can edit, the default context menu does not show the Paste command. Instead, it shows only the Cut and Copy commands.

    An image of the context menu for text shown over editable text while there is no text in the clipboard to paste.
  • Don't add a command to the context menu when direct manipulation or selection is possible. Users should execute commands primarily by directly manipulating a UI element or by selecting a UI element and using a command that is on the app bar. This helps ensure commands are in predictable and discoverable screen locations. For example, users should be able to rotate a picture by manipulating the image directly with their fingers instead of using a "Rotate" command in the context menu.

  • Don't duplicate commands in the context menu. If there is already a clear way to accomplish the action like direct manipulation or an existing app bar command , do not add a context menu command for that same action. Instead of relying on duplication, trust that users find commands by selecting an item or navigating to an item to act on it. However, there is an exception for some actions that can be executed by keyboard shortcuts. If the action can only be executed by a keyboard shortcut, like CRTL+C to copy, it is okay to duplicate that action by adding a command to the context menu.

  • Don't show a context menu for the background of a page or for a large object. Instead, when you have commands that act on the background of a page or on a object that takes up the whole screen, use the app bar or add a command to your app's canvas to act on the page or object.

  • Don't show a command that would result in an error. For example, do not show the paste command if the paste location cannot be edited.

Additional usage guidance

A context menu is typically hidden from view and is an efficient means of conserving screen space. Use a context menu if there is a small set of contextual commands and options that apply to the selected object or window region. Context menus have a specific order: most frequently used items first (primary commands), transfer commands next, and properties last. This order provides efficiency and predictability.

Related topics

For designers
Adding context menus
Guidelines for flyouts
Guidelines for clipboard commands
Laying out your UI
Guidelines for message dialogs
For developers (HTML)
Adding context menus
For developers (XAML)
PopupMenu class

 

 

Show:
© 2014 Microsoft