Menu consists of a MenuTrigger that wraps another element (often a Button, but it can be anything).
When that trigger is clicked, it launches a MenuPopover.
MenuPopover holds a MenuList, which contains one or more MenuItem children.
Each MenuItem acts as a button by default, but you can have it act as a link instead (see below).
Menu shares code with Listbox, and behaves similarly: to detect a user interaction with the Menu, use an onChange handler on the Menu itself.

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem key="Coffee">Coffee</MenuItem>
      <MenuItem key="Tea">Tea</MenuItem>
      <MenuItem key="Cola">Cola</MenuItem>
      <MenuItem key="Water">Water</MenuItem>
      <MenuItem key="Dishwater" disabled>
        Dishwater
      </MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem key="Coffee">Coffee</MenuItem>
      <MenuItem key="Tea">Tea</MenuItem>
      <MenuItem key="Cola">Cola</MenuItem>
      <MenuItem key="Water">Water</MenuItem>
      <MenuItem key="Dishwater" disabled>
        Dishwater
      </MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

Icons

A MenuItem may contain an icon, which can help users discern the difference between options faster.

When using HTML/JSX content inside the MenuItem, include a textValue prop whose value is an accessible label for the option.

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem key="cart" textValue="cart">
        <Icon iconType="cart" size="20p" /> Cart
      </MenuItem>
      <MenuItem key="cola" textValue="cola">
        <Icon iconType="save" size="20p" /> Save
      </MenuItem>
      <MenuItem key="water" textValue="water">
        <Icon iconType="upload" size="20p" /> Upload
      </MenuItem>
      <MenuItem key="settings" textValue="settings">
        <Icon iconType="settings" size="20p" /> Settings
      </MenuItem>
      <MenuItem key="sparkle" textValue="sparkle" disabled>
        <Icon iconType="sparkle" size="20p" /> Free money
      </MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem key="cart" textValue="cart">
        <Icon iconType="cart" size="20p" /> Cart
      </MenuItem>
      <MenuItem key="cola" textValue="cola">
        <Icon iconType="save" size="20p" /> Save
      </MenuItem>
      <MenuItem key="water" textValue="water">
        <Icon iconType="upload" size="20p" /> Upload
      </MenuItem>
      <MenuItem key="settings" textValue="settings">
        <Icon iconType="settings" size="20p" /> Settings
      </MenuItem>
      <MenuItem key="sparkle" textValue="sparkle" disabled>
        <Icon iconType="sparkle" size="20p" /> Free money
      </MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

Sections

Use MenuSection to display a section title to wrap a group of MenuItems. Each MenuSection requires a title and a key prop.

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuSection title="Hot Beverages">
        <MenuItem key="coffee">Coffee</MenuItem>
        <MenuItem key="tea">Tea</MenuItem>
        <MenuItem key="dishwater" disabled>
          Dishwater
        </MenuItem>
      </MenuSection>
      <MenuSection title="Cold Beverages">
        <MenuItem key="cola">Cola</MenuItem>
        <MenuItem key="water">Water</MenuItem>
      </MenuSection>
    </MenuList>
  </MenuPopover>
</Menu>

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuSection title="Hot Beverages">
        <MenuItem key="coffee">Coffee</MenuItem>
        <MenuItem key="tea">Tea</MenuItem>
        <MenuItem key="dishwater" disabled>
          Dishwater
        </MenuItem>
      </MenuSection>
      <MenuSection title="Cold Beverages">
        <MenuItem key="cola">Cola</MenuItem>
        <MenuItem key="water">Water</MenuItem>
      </MenuSection>
    </MenuList>
  </MenuPopover>
</Menu>

Links

Use an href prop on a MenuItem to make it act as a link instead of a button.

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem href="http://www.vistacreate.com" key="vistacreate">
        VistaCreate
      </MenuItem>
      <MenuItem href="http://www.99designs.com" key="99designs">
        99designs
      </MenuItem>
      <MenuItem key="addtocart">Add to Cart</MenuItem>
      <MenuItem key="download">Download</MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem href="http://www.vistacreate.com" key="vistacreate">
        VistaCreate
      </MenuItem>
      <MenuItem href="http://www.99designs.com" key="99designs">
        99designs
      </MenuItem>
      <MenuItem key="addtocart">Add to Cart</MenuItem>
      <MenuItem key="download">Download</MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

Disabled

Use disabled on Button to prevent it from being opened, or on MenuItem to indicate that individual options are not relevant or available within the user's current context.

<FlexBox flexWrap="wrap" gap="between-actions">
  <Box>
    <Menu>
      <MenuTrigger>
        <Button disabled>Menu</Button>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItem key="Coffee">Coffee</MenuItem>
          <MenuItem key="Tea">Tea</MenuItem>
          <MenuItem key="Cola">Cola</MenuItem>
          <MenuItem key="Water">Water</MenuItem>
          <MenuItem key="Dishwater" disabled>
            Dishwater
          </MenuItem>
        </MenuList>
      </MenuPopover>
    </Menu>
  </Box>
  <Box>
    <Menu>
      <MenuTrigger>
        <Button>Menu</Button>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItem key="Coffee">Coffee</MenuItem>
          <MenuItem disabled key="Tea">
            Tea
          </MenuItem>
          <MenuItem key="Cola">Cola</MenuItem>
          <MenuItem key="Water">Water</MenuItem>
          <MenuItem key="Dishwater" disabled>
            Dishwater
          </MenuItem>
        </MenuList>
      </MenuPopover>
    </Menu>
  </Box>
</FlexBox>

<FlexBox flexWrap="wrap" gap="between-actions">
  <Box>
    <Menu>
      <MenuTrigger>
        <Button disabled>Menu</Button>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItem key="Coffee">Coffee</MenuItem>
          <MenuItem key="Tea">Tea</MenuItem>
          <MenuItem key="Cola">Cola</MenuItem>
          <MenuItem key="Water">Water</MenuItem>
          <MenuItem key="Dishwater" disabled>
            Dishwater
          </MenuItem>
        </MenuList>
      </MenuPopover>
    </Menu>
  </Box>
  <Box>
    <Menu>
      <MenuTrigger>
        <Button>Menu</Button>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItem key="Coffee">Coffee</MenuItem>
          <MenuItem disabled key="Tea">
            Tea
          </MenuItem>
          <MenuItem key="Cola">Cola</MenuItem>
          <MenuItem key="Water">Water</MenuItem>
          <MenuItem key="Dishwater" disabled>
            Dishwater
          </MenuItem>
        </MenuList>
      </MenuPopover>
    </Menu>
  </Box>
</FlexBox>

Content

Use clear, concise labels to describe the action being performed by the Menu.
Use sentence case.
Do not use punctuation.

Icons

Icons should be size 20p.

Number of actions

Use between 2-7 actions. On smaller mobile devices, 2-4 actions typically fits nicely on a single viewport.

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
onChange	`((value: string \| number) => void)`	false	Callback function that gets triggered when the value changes (for backward compatibility).	null
maxHeight	`number`	false	Overwrites the max-height of the MenuPopover to a custom value (px)	null

MenuTrigger

See core props for additional props that can be applied to this component.

MenuPopover

See core props for additional props that can be applied to this component.

prop	type	required	description	default
offset	`number`	false	The offset distance from the trigger element.	null
children	`ReactNode`	false	The content to be displayed within the popover.	null
fullBleed	`boolean`	false	Specifies whether the popover should take up the full available width.	null
placement	`Placement`	false	Specifies where the popover should be placed in relation to the trigger element The placement of the popover. eg: "bottom start", "top end", "top", "bottom"	top bottom start
isNonModal	`boolean`	false	Specifies whether the popover is used in a non-modal context.	false
hideArrow	`boolean`	false	Whether to hide the popover arrow Specifies whether to hide the arrow of the popover.	false true
labelText	`string`	false	⚠️ Deprecated - This is deprecated without a replacement.	null
portalContainer	`Element`	false	The container for the portal where the popover is rendered.	null

MenuItem

This component is implemented using the <li /> as the root element. You can utilize the native attributes supported by <li /> tag.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
label	`ReactNode`	false	The contents to render inside the ListboxButton. Can include JSX	null
disabled	`boolean \| null`	false	Whether or not the option is disabled.	null
textValue	`string \| null`	false	The option's human-readable string. Required if using JSX inside of an option	null
withThumbnail	`boolean \| null`	false	Whether or not the option has a thumbnail.	null

Menu

Use Menu...

Don't use Menu...

Icons

Sections

Links

Disabled

Content

Icons

Number of actions

Related