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.

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

<Menu>
  <MenuTrigger>
    <Button>Menu</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuList>
      <MenuItem key="cart">
        <Icon iconType="shoppingBag_1" size="20p" /> Cart
      </MenuItem>
      <MenuItem key="cola">
        <Icon iconType="save" size="20p" /> Save
      </MenuItem>
      <MenuItem key="water">
        <Icon iconType="upload" size="20p" /> Upload
      </MenuItem>
      <MenuItem key="settings">
        <Icon iconType="settings" size="20p" /> Settings
      </MenuItem>
      <MenuItem key="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>

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

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
children	`ReactNode`	false	The content to be displayed within the popover.	null
placement	`Placement`	false	The placement of the popover. eg: "bottom start", "top end", "top", "bottom"	bottom start
offset	`number`	false	The offset distance from the trigger element.	null
isNonModal	`boolean`	false	Specifies whether the popover is used in a non-modal context.	null
hideArrow	`boolean`	false	Specifies whether to hide the arrow of the popover.	true
fullBleed	`boolean`	false	Specifies whether the popover should take up the full available width.	null
labelText	`string`	false	The label text for accessibility.	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. 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
label	`ReactNodeLike`	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

Was this page useful?

Published: Feb 8, 2024Last updated: Sep 3, 2024

Listbox

Modal Dialog

Menu

Use Menu...

Don't use Menu...

Icons

Sections

Links

Content

Icons

Number of actions

Related