Automattic Design System

Components

MenuGroup

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

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

View on Storybook

View source on GitHub

PropsPermalink to this section

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

ExamplesPermalink to this section

DefaultPermalink to this section

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

With SeparatorPermalink to this section

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 (
        <NavigableMenu>
            <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>
        </NavigableMenu>
    );
};