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.

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

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 ButtonHTMLAttributes


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

Extends ButtonHTMLAttributes


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 title#	Description and type Type: `ReactNode`	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 onClose#	Description and type Type: `NoArgCallback<void>`	Default value
Prop items#	Description and type Type: `ReactElement[]`	Default value
Prop initialFocusedItemIndex#	Description and type Determines the initially focused menu item for keyboard and screen reader users. Can be set to `-1` to prevent autofocus (an uncommon case that must have keyboard accessibility accounted for manually if used) Type: `number`	Default value
Prop onHeightChange#	Description and type Type: `EuiContextMenuPanelHeightChangeHandler`	Default value
Prop onTransitionComplete#	Description and type Type: `NoArgCallback<void>`	Default value
Prop onUseKeyboardToNavigate#	Description and type Type: `NoArgCallback<void>`	Default value
Prop showNextPanel#	Description and type Type: `EuiContextMenuPanelShowPanelCallback`	Default value
Prop showPreviousPanel#	Description and type Type: `NoArgCallback<void>`	Default value
Prop transitionDirection#	Description and type Type: `EuiContextMenuPanelTransitionDirection`	Default value
Prop transitionType#	Description and type Type: `EuiContextMenuPanelTransitionType`	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

EuiContextMenuItem

Extends ButtonHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	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 css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop icon#	Description and type Type: `EuiContextMenuItemIcon`	Default value
Prop hasPanel#	Description and type Type: `boolean`	Default value
Prop disabled#	Description and type Type: `boolean`	Default value
Prop onClick#	Description and type Type: `(event: React.MouseEvent) => void`	Default value
Prop buttonRef#	Description and type Type: `Ref<HTMLButtonElement>`	Default value
Prop toolTipContent#	Description and type Required if using a tooltip. Add an optional tooltip on hover Type: `ReactNode`	Default value
Prop toolTipProps#	Description and type Optional configuration to pass to the underlying EuiToolTip. Accepts any prop that EuiToolTip does, except for `content` and `children`. Type: `Partial<Omit<EuiToolTipProps, "children" \| "content">>`	Default value
Prop href#	Description and type Type: `string`	Default value
Prop target#	Description and type Type: `string`	Default value
Prop layoutAlign#	Description and type How to align icon with content of button Type: `EuiContextMenuItemLayoutAlignment`	Default value `center`
Prop size#	Description and type Reduce the size to `s` when in need of a more compressed menu Type: `"s" \| "m"`	Default value `m`