Introduction

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

Using

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

childrennode
The children of the component.

MenuItem Props

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

MenuGroup Props

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

MenuOptionsGroup Props

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

MenuDivider Props