Context Menu is an implementation of a popup menu from a right-mouse-click.

Enable context specific menus to be launched by right-clicking on a component. It should be noted, for accessibility, alternative methods for triggering actions in the context menu should be provided.

The list of items in the context menu is defined by the "menuItems" property, which is expecting an Array of menu items. More examples of these can be seen in the MenuButton component.

The context menu component should surround the component for which the menu can be triggered - see examples below. If more than one context menu is defined in a page (across several components), it is possible that more than one menu will show at a time. That is to say, they are not aware of each others visible state. However, this has been found to be in line with other applications (notably, Microsoft Teams).

Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.

Related components: