MenuGroup – Automattic Design System

MenuGroup wraps a series of related MenuItem components into a common section.

Import

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

Props

Name	Type	Description
`className`	`string`	A CSS `class` to give to the container element.
`hideSeparator`	`boolean`	Hide the top border on the container.
`label`	`string`	Text to be displayed as the menu group header.
`children`	`ReactNode`	The children elements.

Examples

Default

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

With Separator

When other menu items exist above or below a MenuGroup, the group should have a divider line between it and the adjacent item.

const WithSeparator = () => {
    const [ mode, setMode ] = useState( 'visual' );
    const choices = [
		{
			value: 'visual',
			label: 'Visual editor',
		},
		{
			value: 'text',
			label: 'Code editor',
		},
	];

    return (
        <>
            <MenuGroup label="View">
                <MenuItem>Top Toolbar</MenuItem>
                <MenuItem>Spotlight Mode</MenuItem>
                <MenuItem>Distraction Free</MenuItem>
            </MenuGroup>
            <MenuGroup hideSeparator={false} label="Editor">
                <MenuItemsChoice
                    choices={ choices }
                    value={ mode }
                    onSelect={ ( newMode: string ) => setMode( newMode ) }
                    onHover={ () => {} } />
            </MenuGroup>
        </>
    );
};