Dropdown Menu

A menu of actions: account menu, row actions, a more button.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css

@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add dropdown-menu# pnpm dlx @aedis/cli@0.1.0 add dropdown-menu · yarn dlx @aedis/cli@0.1.0 add dropdown-menu · bunx @aedis/cli@0.1.0 add dropdown-menu

Props

Prop	Type	Default	Description
DropdownMenuItem variant	"default" \| "destructive"	"default"	Destructive items open an AlertDialog that starts on Cancel; onClick runs only after confirming.
DropdownMenuItem confirm	{ title?; description?; action? }	—	Text of that confirmation; the dictionary fills the rest, the action defaults to the item text.
DropdownMenuLinkItem href	string	—	Goes through safeUrl; a refused URL leaves the item disabled. External links get noopener noreferrer and a marker.
DropdownMenuContent side / align	Base UI Positioner props	"bottom" / "start"	Where the menu opens.
labels	Partial<DropdownMenuLabels>	—	confirmTitle, confirmDescription, confirm, cancel.
...props	@base-ui/react Menu props	—	Every prop of the underlying Base UI part, including render for composition.

Security

A destructive item never runs on its own click: it asks through an AlertDialog whose focus starts on Cancel, the same rule as outbound agent actions.
Link items go through safeUrl; external links never get window.opener and are marked.