---
name: MenuGroup
package: '@wordpress/components'
category: Actions
status: stable
canonical: 'https://system.automattic.design/components/menugroup/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-menugroup--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/menu-group'
---

# MenuGroup

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

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

## Props

| Name | Type | Default | 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

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

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

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