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.
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
Prop | Description and type | Default value |
|---|---|---|
Prop size# | Description and type Alters the size of the items and the title "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. 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 (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. LegacyRef<unknown> | Default value |
EuiContextMenuPanel
Prop | Description and type | Default value |
|---|---|---|
Prop size# | Description and type Alters the size of the items and the title "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. 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 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. LegacyRef<unknown> | Default value |
EuiContextMenuItem
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. 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 ReactNode | Default value |
Prop toolTipProps# | Description and type Optional configuration to pass to the underlying EuiToolTip. 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 EuiContextMenuItemLayoutAlignment | Default value center |
Prop size# | Description and type Reduce the size to "s" | "m" | Default value m |