MenuItem 
Edit
MenuItem is a component which renders a button intended to be used in combination with the DropdownMenu component.
Usage Usage
import { MenuItem } from '@wordpress/components';
import { useState } from '@wordpress/element';
const MyMenuItem = () => {
const [ isActive, setIsActive ] = useState( true );
return (
<MenuItem
icon={ isActive ? 'yes' : 'no' }
isSelected={ isActive }
onClick={ () => setIsActive( ( state ) => ! state ) }
>
Toggle
</MenuItem>
);
};
Props Props
MenuItem supports the following props. Any additional props are passed through to the underlying Button.
children children
- Type:
WPElement - Required: No
Element to render as child of button.
info info
- Type:
string - Required: No
Text to use as description for button text.
Refer to documentation for label.
icon icon
- Type:
string - Required: No
Refer to documentation for Button’s icon prop.
iconPosition iconPosition
- Type:
string - Required: No
- Default:
'right'
Determines where to display the provided icon.
isSelected isSelected
- Type:
boolean - Required: No
Whether or not the menu item is currently selected.
shortcut shortcut
- Type:
stringorobject - Required: No
If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of display (string) and ariaLabel (string).
role role
- Type:
string - Require: No
- Default:
'menuitem'
Aria Spec. If you need to have selectable menu items use menuitemradio for single select, and menuitemcheckbox for multiselect.