Dinachi

Menu

A popup menu for actions and options triggered by a button.

View Source

#Installation

npx @dinachi/cli@latest add menu

#Usage

tsx
import {
  Menu,
  MenuTrigger,
  MenuPortal,
  MenuPositioner,
  MenuContent,
  MenuItem,
  MenuCheckboxItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuLabel,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubTrigger,
  MenuSubContent,
} from "@/components/ui/menu"

#Examples

Default Menu

A basic menu with items, shortcuts, and separators

Menu with Checkboxes

Menu with toggleable checkbox items

Menu with Radio Group

Menu with radio items for single selection

Menu with Submenu

Menu with nested submenus for hierarchical actions

#API Reference

PropTypeDefaultDescription
openboolean—The controlled open state of the menu root.
defaultOpenbooleanfalseThe initial open state for uncontrolled usage.
onOpenChange(open: boolean) => void—Callback fired when the menu open state changes.
MenuItem.insetbooleanfalseAdds indentation for nested command-style layouts.
MenuLabel.insetbooleanfalseAdds indentation to section labels.
MenuSubTrigger.insetbooleanfalseAdds indentation to submenu triggers.