💠 Context Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Usage

The Context Menu component is a type of dropdown menu that appears upon user interaction, typically a right-click or a long-press on touch devices.

It provides a list of actions or options that are contextually relevant to the area of the interface where the interaction took place. This allows for a more efficient workflow, as users can quickly access commands specific to their current focus or task without navigating away.

When to use

• Content interaction: Use a Context Menu to provide options for interacting with specific content, such as files in a file manager or items in a list.
• Efficient workflow: Employ a Context Menu to streamline user workflows by reducing the number of steps to access frequently used commands.
• Space conservation: Utilize a Context Menu to save space on the primary UI by hiding secondary options until they are needed.
• Functionality enhancement: Enhance the functionality of UI elements by attaching a Context Menu with additional, relevant actions.

Avoid using Context Menus as the only means of performing important actions, as this can make them less discoverable to users who may not expect to right-click or may be using devices without a secondary click. Do not clutter the Context Menu with too many options or actions unrelated to the current context, as this can overwhelm users and reduce efficiency.

Examples

Default

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Uses roving tabindex (opens in a new tab) to manage focus movement among menu items.

Keyboard interactions