MenuGroups assemble MenuItems and can display a title. Grouping Menu options provides context clues to users about related actions. An optional title can be added to reinforce the intent of the grouping.
Examples #
Import Syntax #
import Menu, { MenuGroup } from 'mineral-ui/Menu';Grouping MenuItems #
To group MenuItems together, wrap them in a MenuGroup. Optionally, provide a title to provide context if the grouping is large or not immediately obvious.
Your Menu may not need a MenuGroup title. If your Menu is simple, instead consider using a MenuDivider, which is quicker to scan for your users.
Menu Group Title
Menu Group Title
<DemoLayout> <Menu> <MenuGroup title="Menu Group Title"> <MenuItem> Menu item </MenuItem> <MenuItem> Menu item </MenuItem> </MenuGroup> <MenuGroup title="Menu Group Title"> <MenuItem> Menu item </MenuItem> <MenuItem> Menu item </MenuItem> </MenuGroup> </Menu> </DemoLayout>
API & Theme #
MenuGroup Theme Variables #
These variables can be used as hooks to override this component's
style at either a
local
or global
level. The theme referenced below is whatever theme is available
from props to the instance of this component.
| Variable | Value |
|---|---|
| MenuGroupTitle_fontSize | theme.fontSize_mouse |
| MenuGroupTitle_fontWeight | theme.h5_fontWeight |
| MenuGroupTitle_marginTop | theme.space_stack_sm |
| MenuGroupTitle_paddingTop | theme.space_stack_md |
| MenuGroupTitle_paddingBottom | theme.space_stack_sm |
Usage #
When/How to Use #
MenuGroups are used to group conceptually related elements, and
to hint at other available, related options. If the intention of the grouping is
not immediately obvious, add a section title via the title prop to aid in
your users' decision-making process.
If there are only a few elements in a couple of groups, and the grouping logic is obvious, consider using a MenuDivider instead.
Best Practices #
Create groups if there are more than one set of actions in a Menu. Users will be able to quickly scan their available options if there aren't too many actions at the same level of hierarchy.
Don't repeat the obvious in the group title. If there are only a couple of groups with a handful of elements, trust that the user will figure out the grouping from context.
History Navigation
Text Actions
Don't place too many items in a group, which will be overwhelming to users and your feature will get buried.