import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuShortcut,
  MenuTrigger,
} from "@/components/ui/chatcn/menu"

<Menu>
  <MenuTrigger render={<Button variant="outline">Actions</Button>} />
  <MenuContent>
    <MenuItem onClick={rename}>
      <PencilIcon />
      Rename
      <MenuShortcut>R</MenuShortcut>
    </MenuItem>
    <MenuSeparator />
    <MenuItem disabled>Delete thread</MenuItem>
  </MenuContent>
</Menu>

Put an icon first and a MenuShortcut last; both are styled for you. MenuLabel must sit inside a MenuGroup or MenuRadioGroup. Pass render to the trigger to use your own button.

Examples

Checkbox, radio and submenu

Checks sit in a reserved slot at the end of the row, so checking an item never shifts its label.

Radio and checkbox items with a submenu.

Parts

Part	Base UI part	Notes
`Menu`	`Menu.Root`	`open`, `defaultOpen`, `onOpenChange`, `modal` (default true)
`MenuTrigger`	`Menu.Trigger`	`render` to use your own button
`MenuContent`	`Portal`, `Positioner`, `Popup`	`side` (bottom), `align` (start), `sideOffset` (6), `alignOffset`, `container`
`MenuItem`	`Menu.Item`	`inset` lines up a label with iconed items, `disabled`
`MenuCheckboxItem`	`Menu.CheckboxItem`	`checked`, `onCheckedChange`, `closeOnClick`
`MenuRadioGroup`, `MenuRadioItem`	`Menu.RadioGroup`, `Menu.RadioItem`	`value`, `onValueChange`
`MenuGroup`, `MenuLabel`	`Menu.Group`, `Menu.GroupLabel`	Sentence case labels, never uppercase
`MenuSeparator`	`Separator`	Full bleed hairline
`MenuShortcut`		Decorative hint, hidden from screen readers
`MenuSub`, `MenuSubTrigger`, `MenuSubContent`	`SubmenuRoot`, `SubmenuTrigger`	Opens to the inline end, first item level with the trigger

Keyboard

Key	Action
`Enter`, `Space`, `ArrowDown`	Open from the trigger, focus the first item
`ArrowUp`, `ArrowDown`	Move between items, looping
`ArrowRight` (`ArrowLeft` in RTL)	Open a submenu
`Esc`	Close the topmost menu and return focus to its trigger
Letters	Jump to the item that starts with them

Accessibility

Roles, aria-expanded, aria-checked and roving focus come from Base UI Menu.
Shortcut hints are aria-hidden; the item text stays the accessible name.
Items grow to 44 px on touch screens. In forced colors the popup keeps an outline.

Motion

Enter: opacity, scale from 0.96 and 4 px of travel away from the trigger, 180 ms ease-chatcn-out, growing from --transform-origin. Exit: 140 ms to scale 0.98.
Opened or closed with the keyboard, Base UI sets data-instant and nothing animates.
Item highlight is instant: menus are used too often for an animated hover.
Reduced motion keeps the fade and drops the scale and travel.

Menu

Installation

Usage