MenuGroup wraps a series of related MenuItem components into a common section.
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.
[MenuGroup diagram with label and dividers]
MenuGrouplabelMenuGroupdividers
Development guidelines
Usage
import { MenuGroup, MenuItem } from '@wordpress/components';
const MyMenuGroup = () => (
<MenuGroup label="Settings">
<MenuItem>Setting 1</MenuItem>
<MenuItem>Setting 2</MenuItem>
</MenuGroup>
);
Related Components
MenuGroups are intended to be used in aDropDownMenu.- To use a single button in a menu, use
MenuItem. - To allow users to toggle between a set of menu options, use
MenuItemsChoiceinside of aMenuGroup.
![[MenuGroup Example]](https://i0.wp.com/wordpress.org/gutenberg/files/2019/03/MenuGroup.png?ssl=1){kind=link}
![[MenuGroup diagram with label and dividers]](https://i0.wp.com/wordpress.org/gutenberg/files/2019/03/MenuGroup-Anatomy.png?ssl=1){kind=link}
![[Code is Poetry]](https://s.w.org/style/images/code-is-poetry-for-dark-bg.svg){kind=link}