Menu

Basic Usage

Menus are composed of MenuDivider, MenuGroup, and MenuItem. Menus display a list of actions or navigation options.

Note

Menus normally occupy the full available width of their container. The Menus here are width-constrained for illustration purposes.

Menu item with onClick
Menu itemSecondary text
Icon at start
Icon at end
Disabled menu item

Group Title

Success variant
Warning variant
Danger variant
<DemoLayout>
  <Menu>
    <MenuItem onClick={event => { console.log(event) }}>
      Menu item with onClick
    </MenuItem>
    <MenuItem secondaryText="Secondary text">
      Menu item
    </MenuItem>
    <MenuItem iconStart={<IconCloud />}>Icon at start</MenuItem>
    <MenuItem iconEnd={<IconCloud />}>Icon at end</MenuItem>
    <MenuDivider />
    <MenuItem disabled onClick={event => { console.log(event) }}>Disabled menu item</MenuItem>
    <MenuGroup title="Group Title">
      <MenuItem variant="success">Success variant</MenuItem>
      <MenuItem variant="warning">Warning variant</MenuItem>
      <MenuItem variant="danger">Danger variant</MenuItem>
    </MenuGroup>
  </Menu>
</DemoLayout>