Menu

Menus display a list of actions or choices anchored to a trigger.

The Menu component is a Base UI component.

MenuTrigger renders no styles of its own — compose it with a Button (or any other element) through the render prop.

Icons

Menu items lay out their children in a row with a built-in gap, so an icon can be placed right before the label.

Groups

Use MenuGroup with a MenuGroupLabel to label related items, and MenuSeparator to divide sections.

Checkbox items

Use MenuCheckboxItem to toggle a setting on or off. Set defaultChecked to tick an item initially, or use checked and onCheckedChange to control it. Checkbox items keep the menu open when clicked by default — set closeOnClick to close it instead.

Radio items

Use MenuRadioGroup with MenuRadioItem for a set of mutually exclusive options. Set defaultValue to select an item initially, or use value and onValueChange to control the selection.

Submenu

Nest a MenuSubmenu with a MenuSubmenuTrigger inside the menu to open a second level. The submenu opens to the side of its trigger and renders its own MenuContent.

Links

Use MenuLinkItem to navigate to another page. It renders an <a> element, so it supports href, target, and the other anchor attributes.

Disabled

Use the disabled prop on an item to prevent a single action, or the disabled prop on MenuTrigger to disable the whole menu.

State

By default, Menu is an uncontrolled component that manages its own open state. Use the defaultOpen prop to render the menu initially open.

<Menu defaultOpen>
  <MenuTrigger render={<Button label="Song" variant="secondary" />} />
  <MenuContent>
    <MenuItem>Add to Library</MenuItem>
  </MenuContent>
</Menu>

Use open and onOpenChange props if you need to access or control the state, for example to open a dialog from a menu item.

const [isOpen, setIsOpen] = useState(false)


return (
  <Menu onOpenChange={setIsOpen} open={isOpen}>
    <MenuTrigger render={<Button label="Song" variant="secondary" />} />
    <MenuContent>
      <MenuItem>Add to Library</MenuItem>
    </MenuContent>
  </Menu>
)