Ravox KitOverlays
Dropdown Menu
A dropdown menu with items, icons, shortcuts, groups with headings, checkbox and single-choice items, submenus and a destructive item. Full keyboard support from the WAI-ARIA pattern, with type-ahead, and it opens in the top layer: no overflow clips it.
Settings
Toggles
Examples
File actions
Proposta — Clínica Aurora.pdf
Toggle columns
Single choice
Installation
The command creates components/ui/dropdown-menu.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add dropdown-menuProps
| Prop | Type | Default | Description |
|---|---|---|---|
| <DropdownMenu open defaultOpen onOpenChange> | boolean / boolean / (open) => void | — | The root. Controlled with open + onOpenChange, or uncontrolled with defaultOpen. |
| <DropdownMenuTrigger asChild> | boolean | false | The button that opens it. With asChild, passes the behavior to the child (e.g. <Button>). |
| <DropdownMenuContent side align sideOffset> | "bottom" | "top" | "right" | "left" / "start" | "center" | "end" / number | "bottom" / "start" / 6 | The menu box. Flips to the other side when there is no room; at least as wide as the trigger. |
| <DropdownMenuItem icon shortcut destructive onSelect> | ReactNode / string / boolean / (e) => void | — | One item. onSelect runs on click, Enter or Space; e.preventDefault() keeps the menu open. |
| <DropdownMenuCheckboxItem checked defaultChecked onCheckedChange> | boolean / boolean / (checked) => void | — | Checkbox item (menuitemcheckbox). Stays open when checked; closeOnCheck changes that. |
| <DropdownMenuRadioGroup value defaultValue onValueChange label> | string / string / (value) => void / ReactNode | — | Single-choice group, with <DropdownMenuRadioItem value>. |
| <DropdownMenuGroup label> | ReactNode | — | Groups items; the label appears on top and names the group for screen readers. |
| <DropdownMenuSub> + <DropdownMenuSubTrigger> + <DropdownMenuSubContent> | — | — | Submenu: opens on hover, click or the → key; ← and Esc go back. |
| <DropdownMenuSeparator> / <DropdownMenuLabel> | — | — | Line between blocks and a standalone heading. |
| disabled / textValue | boolean / string | — | On any item: skips the item, and the text used for type-ahead when the child is not plain text. |