# MenuGroup

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

<img src="https://i0.wp.com/wordpress.org/gutenberg/files/2019/03/MenuGroup.png?ssl=1" data-recalc-dims="1" decoding="async" alt="MenuGroup Example" />

## Design guidelines

### Usage

A `MenuGroup` should be used to indicate that two or more individual MenuItems are related. When other menu items exist above or below a `MenuGroup`, the group should have a divider line between it and the adjacent item. A `MenuGroup` can optionally include a label to describe its contents.

<img src="https://i0.wp.com/wordpress.org/gutenberg/files/2019/03/MenuGroup-Anatomy.png?ssl=1" data-recalc-dims="1" decoding="async" alt="MenuGroup diagram with label and dividers" />

1.  `MenuGroup` label
2.  `MenuGroup` dividers

## Development guidelines

### Usage

``` jsx
import { MenuGroup, MenuItem } from '@wordpress/components';

const MyMenuGroup = () => (
    <MenuGroup label="Settings">
        <MenuItem>Setting 1</MenuItem>
        <MenuItem>Setting 2</MenuItem>
    </MenuGroup>
);
```

## Related Components

- `MenuGroup`s are intended to be used in a `DropDownMenu`.
- To use a single button in a menu, use `MenuItem`.
- To allow users to toggle between a set of menu options, use `MenuItemsChoice` inside of a `MenuGroup`.