A button-triggered menu driven by a data array, with icons, shortcuts, checkbox items, a side submenu and the full keyboard model.
npx shadcn@latest add https://hyperblur.dev/r/dropdown-menu.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dropdown-menu.tsx.
import { DropdownMenu } from "@/components/hyperblur/dropdown-menu"
<DropdownMenu trigger="Actions" items={[{ id: "rename", label: "Rename", shortcut: "R" }, { type: "separator" }, { id: "delete", label: "Delete", destructive: true }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | DropdownMenuItem[] | required | Menu entries: item, checkbox, separator, label or submenu. Items take id, label, icon, shortcut, disabled and destructive. |
| trigger | ReactNode | "Options" | Content of the trigger button. A string also gets a chevron. |
| triggerLabel | string | Accessible name of the trigger when it only holds an icon. | |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the menu opens or closes. | |
| onSelect | (id: string) => void | Called with the id of the chosen action item. | |
| align | "start" | "end" | "start" | Which edge of the trigger the menu lines up with. |
| side | "auto" | "bottom" | "top" | "auto" | auto flips the menu above the trigger when there is no room below. |
| size | "sm" | "md" | "md" | Item height: 24 or 32 pixels. |
| accent | string | "#2f7bff" | Focus ring and checkbox tick color. |