MenuDivider | Mineral UI

MenuDividers separate MenuItems and MenuGroups to establish hierarchy in a Menu with several options.

MenuDividers are not merely design elements to visually separate options. Rather, the are a way to logically group choices. Too many dividers will add unnecessary weight to your Menu.

Examples #

Import Syntax #

import Menu, { MenuDivider } from 'mineral-ui/Menu';

Separating MenuItems #

MenuItems and MenuGroups can be separated with a MenuDivider. MenuDividers are used to create hierarchy by setting some options apart from others.

Menu item

Menu Group Title

Menu item

<DemoLayout>
  <Menu>
    <MenuItem>
      Menu item
    </MenuItem>
    <MenuDivider />
    <MenuItem>
      Menu item
    </MenuItem>
    <MenuItem>
      Menu item
    </MenuItem>
    <MenuGroup title="Menu Group Title">
      <MenuItem>
        Menu item
      </MenuItem>
      <MenuItem>
        Menu item
      </MenuItem>
    </MenuGroup>
    <MenuDivider />
    <MenuGroup>
      <MenuItem>
        Menu item
      </MenuItem>
      <MenuItem>
        Menu item
      </MenuItem>
    </MenuGroup>
  </Menu>
</DemoLayout>

API & Theme #

MenuDivider Props #

The MenuDivider component takes the following React props.

Note

MenuDivider does not have properties of its own. Undocumented properties will be applied to the root element.

MenuDivider 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
MenuDivider_borderColor	theme.borderColor
MenuDivider_borderWidth	1px
MenuDivider_margin	theme.space_stack_sm

Usage #

When/How to Use #

MenuDividers are used to visually separate MenuGroups or individual MenuItems to establish hierarchy in your Menu. They could be used to separate items in a long list if all elements exist on the same conceptual level. For example, if your Menu is composed of a long list of songs, a MenuDivider could be placed between songs that start with A, B, C, etc.

Do not use MenuDividers to simply separate options as a decoration, or to provide "underlines" to the MenuItem.

Best Practices #

Divide menu options to establish hierarchy.

Adam

Alex

Betsy

Brian

Bryson

Carly

Charles

Separate options that are related but should be set apart to increase usability.

Create

Read

Update

Delete

Don't use MenuDividers for decoration, if there is no need to create further grouping.

Helium

Neon

Argon

Krypton

Xenon

Radon

Oganesson