Evergreen exports multiple component to help create menus. All components are accessible through the Menu component.

  • Menu: menu wrapper, helps with focus management.
  • Menu.Item: single menu item button. Contains labels and icons.
  • Menu.Group: group menu items together.
  • Menu.Divider: menu divider to divide menu groups visually.
  • Menu.OptionsGroup: menu group which works like a radio group.

Focus management

The Menu component is used to help with focus management.

  • Arrow down on a button will bring focus inside the popover.
  • Arrow keys within the menu will cycle through all of the menu items and skip disabled items.
  • The Home key (fn + arrow left) will go to the first item.
  • The End key (fn + arrow right) will go to the last item.

Menu without icons

All examples below will show the Menu inside of a Popover. It is important to understand the Menu component by itself does not manage a dropdown interaction.

Hide code


Menu items support a onSelect handler that is triggered on click and enter + space key down.

Hide code

Dropdown menu

Hide code

Menu with icons

The onSelect handlers are omitted for brevity.

Hide code

Menu with disabled items

Hide code

Groups with titles

The onSelect handlers are omitted for brevity.

Hide code

Menu option groups

The Menu.OptionsGroup is useful inside of table headers to help with sorting and filtering options.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

Custom menu items

The Menu by itself offers focus management to elements inside of the component that either have [role="menuitemradio"] or [role="menuitem"].

The focus styles are currently not working in the docs, sorry for the inconvenience!

Hide code

Menu Props

The children of the component.

MenuItem Props

Element type to use for the menu item. For example: `<MenuItem is={ReactRouterLink}>...</MenuItem>`
Function that is called on click and enter/space keypress.
iconelementType | element
The Evergreen or custom icon before the label.
The children of the component.
Secondary text shown on the right.
The default theme only supports one default appearance.
intent'none' | 'success' | 'warning' | 'danger'
The intent of the menu item.
Callback to invoke onkeypress
Flag to indicate whether the menu item is disabled or not

MenuGroup Props

Title of the menu group.
The children of the menu group.

MenuOptionsGroup Props

Title of the menu group.
The current value of the option group.
Function called when selection changes.
List of options rendered in the group.

MenuDivider Props