Skip to main content

Menu context

Create a list of actions or navigational items.

View in StorybookExternal link icon

Behavior​

  • The context menu appears on hover over the menu that triggers it.

  • By default, the context menu appears to the right of the menu that triggered it, but it can also open to its left, depending on the triggering menu position in regards to the edge of the screen.

Usage​

You should use a contextual menu in the following cases:

  • When you want to provide users with additional actions but the space is limited.

  • For secondary or less important actions.

  • When elements are related to each other.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the menu item's visual pressed state.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Listbox Pattern (Sections With Show/Hide Functionality) for guidance on expected keyboard interactions, including roles, states, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.