ContextMenu

Menus serve a variety of purposes for users, including enabling them to take actions, select options from a list, configure settings, and perform other related tasks. These menus can be positioned within a transient container, such as a popover or tray.

Examples

Use the context menu component when additional options are available to the user but there is a space constraint.
A menu item can include an icon, but not purely for decoration. Use an icon only when necessary and when it has a strong association with the label text (e.g., tool switching options in a toolbar).

Anatomy

How to use

When a menu item contains a submenu, a drill-in chevron will appear at the end of the menu item to show that a submenu is available

When to use

To ensure proper alignment, menus should be sized based on the component used as the menu trigger. This means that the size of all submenus within the menu should match that of the menu trigger.

When not to use

Avoid using ellipses (…) in menu item names within products whenever possible.

Accessibility

Keyboard interactions

Enter or Space: When a menu trigger is in focus, it displays the menu. When a menu item is in focus, pressing Enter or Space initiates the respective item’s behaviour, such as making a selection or performing an action.
Up Arrow / Down Arrow: These keys allow you to navigate the options within a single hierarchical level of the menu, moving the focus up or down.
Right Arrow / Left Arrow: In a popover menu, the right arrow moves the focus down the hierarchy to access a submenu, while the left arrow moves the focus up to the parent menu.
Esc: Pressing Esc removes the focus from within the menu and closes it. If the focus is currently within a submenu, pressing Esc moves the focus to the parent menu and closes the submenu.

References

Storybook