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.

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.

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.

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

Say hello

Without Icons

The onSelect handlers are omitted for brevity.

With Icons

With Disabled Items

The onSelect handlers are omitted for brevity.

With Group Titles

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

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!

Custom Menu Items