Dropdown Menu

Data-driven menu — items with icons/shortcuts, checkbox & radio items, labels, separators, nested submenus, typeahead.

5 files · 407 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/dropdown-menu.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs dropdown-menu

Usage

import { DropdownMenu } from "@/components/opus/ui/dropdown-menu";

<DropdownMenu
  trigger={<Button>Open</Button>}
  items={[{ label: "Profile", onSelect }, { type: "separator" }, { label: "Log out", destructive: true }]}
/>

API

Prop	Type	Default	Description
trigger	ReactElement	—	Element that toggles the menu (gets ref + aria).
items	MenuItem[]	—	item \| checkbox \| radio \| submenu \| label \| separator
side / align	Side / Align	"bottom" / "start"	Placement (flips on collision).

Notes

Keyboard: ↑ ↓ Home End, Enter/Space, → opens a submenu, ← closes it, Esc closes, type to jump.

← PreviousSteps Next →Context Menu