Context menu

---

EuiContextMenu is a nested menu system useful for navigating complicated trees.It lives within an EuiPopover which itself can be wrapped around any component (like a button in this example).

Sizes

EuiContextMenu supports a small and medium size. The default size is medium, m, and should be used for most menus and major actions such as top application menus. Use the smaller size, s, for a more compressed version containing minor actions or repeated menus like in EuiTable pagination.

With single panel

Use EuiContextMenuPanel for simple, non-nested context menus. The below pagination example has no nesting and no title.

note

The selected context menu item should have an aria-current attribute

aria-current tells screen readers which item is selected. Add an aria-current="true" attribute to EuiContextMenuItem when a context menu item is clicked or receives a keypress.

Displaying custom elements

If you have custom content to show instead of a list of options, you can pass a React element as a child to EuiContextMenuPanel.

Using panels with mixed items & content

Context menu panels can be passed React elements through the content prop instead of items. The panel will display your custom content without modification.

If your panel contents have different widths or you need to ensure that a specific context menu panel has a certain width, add width: [number of pixels] to the panel tree.

You can add separator lines in the items prop if you define an item as {isSeparator: true}. This will pass the rest of its fields as props to a EuiHorizontalRule component.