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	default
`onChange` Callback function that gets triggered when the value changes (for backward compatibility).	`((key: string \| number, value?: unknown) => void)`	false	null
`maxHeight` Overwrites the max-height of the MenuPopover to a custom value (px)	`number`	false	null
`disabledKeys` The keys of the disabled items in the Menu.	`Set<string \| number>`	false	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	default
`offset` The offset distance from the trigger element.	`number`	false	null
`children` The content to be displayed within the popover.	`ReactNode`	false	null
`fullBleed` Specifies whether the popover should take up the full available width.	`boolean`	false	null
`placement` Specifies where the popover should be placed in relation to the trigger element The placement of the popover.	`Placement`	false	top bottom start
`isNonModal` Specifies whether the popover is used in a non-modal context.	`boolean`	false	false
`hideArrow` Whether to hide the popover arrow Specifies whether to hide the arrow of the popover.	`boolean`	false	false true
`labelText` ⚠️ Deprecated - This is deprecated without a replacement.	`string`	false	null
`portalContainer` The container for the portal where the popover is rendered.	`Element`	false	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	default
`label` The contents to render inside the ListboxButton. Can include JSX	`ReactNode`	false	null
`disabled` Whether or not the option is disabled.	`boolean \| null`	false	null
`textValue` The option's human-readable string. Required if using JSX inside of an option	`string \| null`	false	null
`withThumbnail` Whether or not the option has a thumbnail.	`boolean \| null`	false	null

Menu

Use Menu...

Don't use Menu...

Icons

Sections

Links

Disabled

Content

Icons

Number of actions

Related