DropdownMenu

An action menu anchored to a trigger; keyboard navigable and rendered in a portal.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add dropdown-menu

What add dropdown-menu installs alongside the component. The CLI skips any you already have in a compatible version.

2 examples · 1 component

Label, actions and a separator; keyboard navigable.

Redesign 2026
Mobile app

Required composition: the row menu opens in the correct theme over the table.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`DropdownMenu` Root; accepts open, defaultOpen and onOpenChange.	`—`	—
`DropdownMenuTrigger` Opens the menu; use render to reuse a Button.	`button`	—
`DropdownMenuContent` Portaled popup; side, align and sideOffset adjust its position.	`div`	—
`DropdownMenuItem` An action; accepts onClick and disabled.	`div`	—
`DropdownMenuLabel` Heading for a group.	`div`	—
`DropdownMenuSeparator` Divides groups of actions.	`div`	—

The states that apply to this component and their visual treatment.

State	Treatment
Closed	Only the trigger is visible.
Open	Portaled popup in the active theme; focus on the first item.
Highlighted item	Arrow keys and the pointer highlight the active item.
Disabled item	disabled skips the item in the focus order.
On close	Escape closes it and returns focus to the trigger.

Opens with Enter, Space or an arrow key; arrow keys move focus between items and Escape closes it, returning focus to the trigger.

The popup uses theme tokens, so it keeps Light/Dark even when opened over a table row or another surface. Give an icon-only trigger an aria-label.