Contextual Menu
Contextual menus provide quick access to relevant actions based on what you've clicked. Right-click to reveal a handy menu offering actions specific to what you've selected, saving you time and keeping your workspace clean.
Right click here.
API Reference
Examples
Secondary
Right click here.
Usage
General Guidelines
Do's
- Use to provide global and contextual keyboard shortcuts for users.
- Only include options directly related to the selected item/section.
- Limit the number of options to avoid overwhelming users.
- Order options based on frequency of use or importance.
Don'ts
- Avoid options that are available elsewhere in the screen.
- Don't create complex shortcuts, as users will struggle to remember them.
- Don’t make command menu available only in certain views of the application.
Writing Guidelines
When to use
- Use to provide quick access to commonly used functions.
- Use context menu to hide less frequently used or advanced options until users specifically require them. This keeps the UI tidy and focuses on the most important aspects.
- Use when the section or specific item have have multiple actions.
When not to use
- When submitting a form with a static list of options for users to select from, or when filtering, use a dropdown rather than a menu.
- When there are only a few relevant actions, consider using buttons or icons.
Use Case
General Use Cases
General use to access options like copy, cut, paste, delete, rename.
General use on an image to edit, save, or share.
Digital Health Use Cases
For Digital Health Applications contextual menu can be used for tracker. e.g. when Right-clicking on a sleep tracker entry to edit details, add notes, or delete.
Accessibility Guidelines
- Use
aria-haspopupto indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.