Context menu | Elastic UI Framework

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.

Accessibility recommendation

The selected context menu item should receive the aria-current="true" attribute, which tells screen readers which item is selected.

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

Custom panels

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.

Custom items

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

For completely custom rendered items, you can use the {renderItem} property to pass a component or any function that returns a JSX node.

Props

EuiContextMenu

Extends HTMLAttributes


Prop	Description and type	Default value
Prop size#	Description and type Alters the size of the items and the title Type: `"s" \| "m"`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop panels#	Description and type Type: `EuiContextMenuPanelDescriptor[]`	Default value
Prop onPanelChange#	Description and type Optional callback that fires on every panel change. Passes back the new panel ID and whether its direction was `next` or `previous`. Type: `(panelDetails: { panelId: EuiContextMenuPanelId; direction?: EuiContextMenuPanelTransitionDirection; }) => void`	Default value
Prop initialPanelId#	Description and type Type: `EuiContextMenuPanelId`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<unknown>`	Default value

EuiContextMenuPanel