MenuItem Edit

MenuItem is a component which renders a button intended to be used in combination with the DropdownMenu component.

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>
    );
};

MenuItem supports the following props. Any additional props are passed through to the underlying Button.

• Type: WPElement
• Required: No

Element to render as child of button.

• Type: boolean
• Required: No

Refer to documentation for Button’s disabled prop.

• Type: string
• Required: No

Text to use as description for button text.

Refer to documentation for label.

• Type: string
• Required: No

Refer to documentation for Button’s icon prop.

• Type: string
• Required: No
• Default: 'right'

Determines where to display the provided icon.

• Type: boolean
• Required: No

Whether or not the menu item is currently selected. isSelected is only taken into account when the role prop is either "menuitemcheckbox" or "menuitemradio".

• Type: string or object
• 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).

• 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.

• Type: WPElement
• Required: No

Allows for markup other than icons or shortcuts to be added to the menu item.