MenuItem

You can use <MenuItem> to organize your menu. You register onclick handlers to respond to user selection. <MenuItem> will automatically close 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-charm.

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 will auto close 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.