MenuItem

You can use <MenuItem> to organize your menu. You register onClick handlers to respond to user selection. <MenuItem> automatically closes the menu unless you specify the noClose attribute. It also makes the item available via keyboard navigation using the arrow keys: up/down keys navigate between menu items, and left/right keys navigate between menu item sub-components, like the Favorite or Delete buttons. To indicate sub-components, include the class name menu-item-icon.

A MenuItem will only display when nested inside the <MenuContent> component.

Usage example

const handler = () => console.log('clicked')
<MenuItem onClick={handler} >My Action</MenuItem>

By default, a MenuItem auto closes the menu when clicked. To override this functionality and keep the menu open, use the noClose prop.

<MenuItem noClose={true}>My Action</MenuItem>

Props

Prop	Type	Required	Default value	Description
onClick	function	No	undefined	A React handler for when the item is clicked
className	string	No	undefined	Custom CSS styles for the item
noClose	Boolean	No	false	Prevents the menu from closing when an item is clicked

<MenuItem> also accepts a "style" prop that behaves exactly as expected. This is necessary because DOM styles are not transmitted through React portals.