MenuItem

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

View on Storybook

View source on GitHub

Import

import { MenuItem } from '@wordpress/components';

Examples

Default

const Default = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

Is Selected

When the role prop is either "menuitemcheckbox" or "menuitemradio", the isSelected prop should be used so screen readers can tell which item is currently selected.

const IsSelected = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

With Icon

const WithIcon = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

With Info

const WithInfo = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};

With Suffix

const WithSuffix = ( props ) => {
	return (
		<MenuGroup>
			<MenuItem { ...props }>Menu Item 1</MenuItem>
		</MenuGroup>
	);
};