Skip to content
gnoud-ui
Menu

Elsewhere

Theme

Component · 16

Menu

A dropdown list of actions. Arrow keys move, typing jumps to an item, Enter chooses, Escape closes and focus returns to the button. The highlighted item is inked in, like the selected tab. Built on Base UI.

Actions

Open it with the mouse, or focus the button and press Enter or the down arrow.

tsx
<Menu>
  <MenuTrigger render={<Button />}>Actions</MenuTrigger>
  <MenuContent>
    <MenuItem onClick={() => rename()}>Rename</MenuItem>
    <MenuItem onClick={() => duplicate()}>Duplicate</MenuItem>
    <MenuItem disabled>Archive</MenuItem>
    <MenuSeparator />
    <MenuLinkItem href="/docs">Documentation</MenuLinkItem>
  </MenuContent>
</Menu>

Toggles, choices and groups

Checkbox and radio items keep the menu open, so several can be changed in one visit.

tsx
<Menu>
  <MenuTrigger render={<Button />}>View</MenuTrigger>
  <MenuContent>
    <MenuGroup>
      <MenuGroupLabel>Show</MenuGroupLabel>
      <MenuCheckboxItem defaultChecked>Grid</MenuCheckboxItem>
      <MenuCheckboxItem>Rulers</MenuCheckboxItem>
    </MenuGroup>
    <MenuSeparator />
    <MenuGroup>
      <MenuGroupLabel>Theme</MenuGroupLabel>
      <MenuRadioGroup defaultValue="light">
        <MenuRadioItem value="light">Light</MenuRadioItem>
        <MenuRadioItem value="dark">Dark</MenuRadioItem>
      </MenuRadioGroup>
    </MenuGroup>
  </MenuContent>
</Menu>

Props

PropTypeDefaultDescription
Menu open / defaultOpen / onOpenChange-closedOpen it uncontrolled, or control it from state.
MenuTrigger renderReactElement<button>Use your own button: render={<Button />}.
MenuContent side / align / sideOffset-"bottom" / "start" / 4Where it opens relative to the trigger.
MenuItem onClick(event) => void-Runs when chosen. The menu then closes.
MenuItem disabledbooleanfalseStays reachable by arrow keys so it is discoverable, but does nothing.
MenuItem labelstring-Text for typeahead, when the children are not plain text.
MenuItem closeOnClickbooleantrueSet false to keep the menu open after choosing.
MenuCheckboxItem checked / defaultChecked / onCheckedChange-falseA toggle. Keeps the menu open by default.
MenuRadioGroup value / onValueChange--Holds the choice among its MenuRadioItems. Keeps the menu open by default.
MenuLinkItem hrefstring-An item that navigates: renders a real link.

A menu is for commands. To pick a value for a form field use Select, and for optional detail use Popover.