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

#API Reference

PropTypeDefaultDescription
openboolean—The controlled open state of the menu.
defaultOpenbooleanfalseThe initial open state for uncontrolled usage.
onOpenChange(open: boolean) => void—Callback fired when the menu open state changes.
modalbooleantrueWhether the menu enters a modal state when open.
loopFocusbooleantrueWhether to loop keyboard focus back to the first item when the end is reached.
disabledbooleanfalseWhether the menu should ignore user interaction.
MenuItem.insetbooleanfalseAdds indentation for nested command-style layouts.
MenuCheckboxItem.checkedboolean—The controlled checked state of the checkbox item.
MenuCheckboxItem.onCheckedChange(checked: boolean) => void—Callback fired when the checkbox item is ticked or unticked.
MenuRadioGroup.valueany—The controlled value of the selected radio item.
MenuRadioGroup.onValueChange(value: any) => void—Callback fired when the selected radio value changes.
MenuRadioItem.valueany—Value of the radio item.
MenuLabel.insetbooleanfalseAdds indentation to section labels.
MenuSubTrigger.insetbooleanfalseAdds indentation to submenu triggers.