Dropdown Menu
An accessible dropdown that springs open from its trigger edge, with submenus, icons, shortcuts, separators, and full keyboard navigation.
Open the menu and pick an action
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/dropdown-menu.json"Usage
tsx
import { DropdownMenu } from "@/components/godui/dropdown-menu";tsx
const items = [
{ label: "Profile", onSelect: () => {} },
{ label: "Workspaces", submenu: [{ label: "GodUI", onSelect: () => {} }] },
{ type: "separator" },
{ label: "Log out", onSelect: () => {} },
];
<DropdownMenu trigger={<button>Open</button>} items={items} side="bottom" align="start" />;Items can be { type: "separator" }, { type: "label", label }, or an action with
label, optional icon, shortcut, href, disabled, onSelect, or a nested submenu.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | — | Element that toggles the menu |
items | DropdownMenuItem[] | — | Menu items, separators, labels, submenus |
side | "top" | "bottom" | "left" | "right" | "bottom" | Panel side |
align | "start" | "center" | "end" | "start" | Panel alignment |