Overview
Contextual menus provide in-place actions relevant to the user’s context. A current selection or some other interaction specifies the context. It may relate to a data point, control, area or section of the interface, or view. Contextual menus are hidden by default and may be missed by users who might not expect them. However, for those who are accustomed to them, they are very efficient means of offering actions on demand, speeding up the workflow, and removing clutter from the UI.
Look and Feel
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
When To Use
A contextual menu provides a shortcut to frequently used commands that benefit from being closer to the user’s cursor. Because of concerns about their discoverability, never use them for actions that cannot already be found elsewhere on the UI.
Recommended
- Use Contextual Menu to display a list of actions that belong to an object (e.g., Copy, Cut, Delete).
- Use Contextual Menu because of interacting with a trigger (e.g. Alt Mouse Click, Tab+Hold).
Your actions are offered somewhere else on the UI, and a contextual menu would provide a convenient shortcut to them
Not Recomended
- Avoid using Contextual Menu as means of navigation.
- Avoid using more than one cascading menu. Favor long menu over a deep hierarchy.
- Avoid placing more than 12 items.
- Avoid using Contextual Menus for making selections.
Behavior and Interaction
Access
Context menus can be triggered in many ways depending on the device or operating system. The lists below outline the most common ones.
Desktop Environments
- Alt-mouse-click on a mouse-hovered object. (users can swap left and right mouse buttons)
- Two-finger-tap on a trackpad (laptops)
- Control+Click (Mac OS)
- Shift+F10 on the keyboard-focused object (Windows).
- the contextual menu of a keyboard-focused object is triggered by the keyboard shortcut Shift+10.
Mobile Environments
- Tap+Hold on an object
Contextual menus are sometimes made explicit by placing an icon button directly in a component and making them accessible with a regular click. While this dramatically improves their discoverability, it's not always possible or required.
Regardless of the interactions used to access a contextual menu, ensure the same target always opens the same contextual menu, with the same menu items, in the same order.
Triggers
Contextual menus can target a single UI Element or a group of elements and reveal different actions applicable in both instances. For example, right-clicking on one card or a group of cards results in different menus matching the context of the user’s selection.
When triggering a contextual menu, consider all mouse-hovered, focused, and selected elements on the screen. Depending on the access type, the outcome may vary.
Mouse Interaction
When triggering a contextual menu with the mouse, always display the menu associated with the mouse-hovered UI element. If other selected or focused elements are on the screen, deselect them and move the focus to the mouse-hovered UI element.
Keyboard Interaction
When triggering a contextual menu with the keyboard, always display the menu associated with the focused UI element. If the concentrated UI element is part of a selection (single or multiple), then show the menu related to the selection.
Anatomy
Menu Item
Menus are built of Menu Items. Each Menu Item represents one action or command. Various menu item types can be combined to construct a contextual menu.
Menu Item Types
Standard
The most common type of menu item. The only type of menu item that supports selection.
Has Children
This menu item type has an arrow on the end side to indicator that interacting with it will show another menu.
Shortcut
This menu item type displays a text that indicates a keyboard shortcut command.
Info
This menu item type has an information icon. Clicking it shows a tooltip. The icon interaction works in disabled state.
Actions
This menu item type contains an overflow toolbar of actions. Online the info icon, the toolbar is disabled in disabled state.
Constructing Menus
- Prefer verbs to describe menu items.
- Order menu items from most to least relevant.
- Include all relevant actions, even if disabled.
- Use ellipsis if the menu item opens a dialog.
- Show keyboard shortcut if available.
- Don't mix menu items with navigation items.
- Don't use selection in contextual menus.
- Avoid using more than 12 menu items in a menu.
- Avoid having more than one sub-menu.
- Don't show keyboard shortcuts on mobile devices.
- Don't truncate menu items; increase width instead.
Displaying Selection Options
A Menu can be used to perform the interaction of several selection components. The menu can signify a single selection (like Radio Button Group, Segmented Button, Select, Switch, or Tab) or a multiple selection function (like Check Box Group, Select List, etc.).
SelectionOptions in Menus
Visually there is no immediate distinction between the two options. The way to distinguish between the two is through language and grammar used to construct the contents of the menus and the menu triggers.
- Use short and precise language
- Consider translations of your menus
- Treat separators as AND operations (ex. Name AND Ascending)
- Don't use words like All, Every, No, None, Same alone. Always use them with a object.
Single-Selection Menus
The menus' trigger action is constructed as a verb, while the menu items use nouns and non-active language. When considering the menu items think of them as mutually exclusive options.
Single Selection in Menus
Recommended
- Use a verb for the menu trigger
- Use a noun or a non-active language for the menu options
Multiple Selection Menus
The menus' trigger action is constructed as nouns, while the menu items use verbs and active language. When considering the menu items think of them as complimentary options.
Multiple Selection in Menus
Recommended
- Use a noun for the menu trigger
- Use a verb or a active language for the menu options
Responsiveness
Tablet Behavior
Menus on tablets behave just as they do on any desktop device. Of course, they are larger to allow for touch interactions.
Phone Behavior
For the most part, the behavior on tablets and phones is identical. The only difference is when interacting with cascading menus. In such cases, the sub-menu displays a title and a back button to let users navigate back to the parent one. In addition, the size of the menu containers resizes to accommodate the new content.
Contextual Menu Responsiveness
- Display titles on cascading menus.
- Display the back button on cascading items.
- Truncate the text if the screen size is insufficient.
- Don't use more than one level of hierarchy.
- Don't show the keyboard shortcuts.
Resources
Design
Menu - Visual Design Specification
Menu - Fiori Fundamental Sample
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.