Elastic UI Framework - Context Menu

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

With single panel

Context menus can be used for simple, non-nested menus as well. The below pagination example has no nesting and no title.

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