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).

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.

With scrollable panel

You can set a fixed height for the context menu panel via the height prop to make the panel scrollable. This can be done both on EuiContextMenu or a standalone EuiContextMenuPanel directly. When height is set,the title and any content outside of the scrollable area remain static while the items are scrollable.

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 className#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop height#	Description and type Type: `Height<string \| number>`	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 HTMLAttributes


Prop	Description and type	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 height#	Description and type Type: `Height<string \| number>`	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 items#	Description and type Type: `ReactElement[]`	Default value
Prop onClose#	Description and type Type: `NoArgCallback<void>`	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 @deprecated - will be removed in the future and handled statically as `center` How to align icon with content of button Type: `EuiContextMenuItemLayoutAlignment`	Default value `center`
Prop external#	Description and type Set to true to show an icon indicating that it is an external link; Defaults to true if `target="_blank"` Type: `boolean`	Default value
Prop hasAriaDisabled#	Description and type NOTE: Beta feature, may be changed or removed in the future Changes the native `disabled` attribute to `aria-disabled` to preserve focusability. This results in a semantically disabled button without the default browser handling of the disabled state. Use e.g. when a disabled button should have a tooltip. Type: `boolean`	Default value