Dropdown Menu component

Action menu anchored to a Button: items with icons and shortcuts, checkbox and radio items, labels, separators, destructive variant. Arrow keys, typeahead, focus follows the pointer, Esc returns focus.

npx @kznlabs/labsui add dropdown-menu

"use client";import { Copy, MoreHorizontal, Pencil, Trash2 } from "lucide-react";import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuSeparator,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";export function ClipActions({ onDelete }: { onDelete: () => void }) {  return (    <DropdownMenu>      <DropdownMenuTrigger        variant="ghost"        size="icon"        aria-label="Clip actions"      >        <MoreHorizontal />      </DropdownMenuTrigger>      <DropdownMenuContent align="end">        <DropdownMenuItem>          <Pencil />          Rename        </DropdownMenuItem>        <DropdownMenuItem shortcut="⌘C">          <Copy />          Copy link        </DropdownMenuItem>        <DropdownMenuSeparator />        <DropdownMenuItem variant="destructive" onSelect={onDelete}>          <Trash2 />          Delete        </DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  );}

<DropdownMenu>

Action menu anchored to a button. Controlled (open + onOpenChange) or uncontrolled.

children*
ReactNode
Trigger and content.
defaultOpendefault false
boolean
Open at first render (uncontrolled).
onOpenChange
(open: boolean) => void
Called on the trigger, Esc, outside click or a selection.
open
boolean
Controlled state; pair with onOpenChange.

Prop	Type	Default
`children*` Trigger and content.	`ReactNode`	—
`defaultOpen` Open at first render (uncontrolled).	`boolean`	`false`
`onOpenChange` Called on the trigger, Esc, outside click or a selection.	`(open: boolean) => void`	—
`open` Controlled state; pair with `onOpenChange`.	`boolean`	—

<DropdownMenuTrigger>

A Button. Keyboard: Enter, Space or Down opens on the first item, Up on the last.

children
ReactNode
Label; its width is reserved so loading and success never resize the button.
confirmLabel
ReactNode
Two-step action: first click swaps the label to this, second click runs onClick.
confirmTimeout
number
Ms before an armed confirm step resets. Also resets on blur or Esc.
loading
boolean
Disables the button and shows a spinner before the label.
loadingLabel
ReactNode
Label shown while loading, with the spinner. Defaults to children.
size
"default" | "sm" | "lg" | "icon"
Height and padding; "icon" is square, so give it an aria-label.
status
ButtonStatus
In-place feedback: loading spins, success swaps the label to successLabel.
successLabel
ReactNode
Text shown on status="success", with a check icon. Defaults to "Done".
swap
SwapDirection
Where the old label slides out to on a swap. Default "left".
variant
"default" | "secondary" | "outline" | "ghost" | "destructive"
Fill and emphasis: one primary action per view, destructive for irreversible ones.

Prop	Type	Default
`children` Label; its width is reserved so loading and success never resize the button.	`ReactNode`	—
`confirmLabel` Two-step action: first click swaps the label to this, second click runs `onClick`.	`ReactNode`	—
`confirmTimeout` Ms before an armed confirm step resets. Also resets on blur or Esc.	`number`	—
`loading` Disables the button and shows a spinner before the label.	`boolean`	—
`loadingLabel` Label shown while loading, with the spinner. Defaults to `children`.	`ReactNode`	—
`size` Height and padding; "icon" is square, so give it an `aria-label`.	`"default" \| "sm" \| "lg" \| "icon"`	—
`status` In-place feedback: `loading` spins, `success` swaps the label to `successLabel`.	`ButtonStatus`	—
`successLabel` Text shown on `status="success"`, with a check icon. Defaults to "Done".	`ReactNode`	—
`swap` Where the old label slides out to on a swap. Default "left".	`SwapDirection`	—
`variant` Fill and emphasis: one primary action per view, `destructive` for irreversible ones.	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive"`	—

Also accepts every Button prop.

<DropdownMenuContent>

children*
ReactNode
Items, labels, groups and separators.
aligndefault "start"
"start" | "end"
Edge of the trigger the menu lines up with.

Prop	Type	Default
`children*` Items, labels, groups and separators.	`ReactNode`	—
`align` Edge of the trigger the menu lines up with.	`"start" \| "end"`	`"start"`

<DropdownMenuItem>

children*
ReactNode
Label, optionally with a leading icon.
disabled
boolean
Shown but not selectable.
onSelect
() => void
Called on click or Enter; the menu then closes.
shortcut
string
Right-aligned hint, e.g. "⌘S".
variantdefault "default"
"default" | "destructive"
"destructive": red, for irreversible actions.

Prop	Type	Default
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`disabled` Shown but not selectable.	`boolean`	—
`onSelect` Called on click or Enter; the menu then closes.	`() => void`	—
`shortcut` Right-aligned hint, e.g. "⌘S".	`string`	—
`variant` "destructive": red, for irreversible actions.	`"default" \| "destructive"`	`"default"`

<DropdownMenuCheckboxItem>

Toggles without closing the menu.

checked*
boolean
Shows the check mark.
children*
ReactNode
Label, optionally with a leading icon.
onCheckedChange*
(checked: boolean) => void
Called with the new state.
disabled
boolean
Shown but not selectable.
shortcut
string
Right-aligned hint, e.g. "⌘S".

Prop	Type	Default
`checked*` Shows the check mark.	`boolean`	—
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`onCheckedChange*` Called with the new state.	`(checked: boolean) => void`	—
`disabled` Shown but not selectable.	`boolean`	—
`shortcut` Right-aligned hint, e.g. "⌘S".	`string`	—

<DropdownMenuRadioGroup>

children*
ReactNode
DropdownMenuRadioItems.
onValueChange*
(value: string) => void
Called with the picked item's value.
value*
string
Value of the checked item.

Prop	Type	Default
`children*` `DropdownMenuRadioItem`s.	`ReactNode`	—
`onValueChange*` Called with the picked item's value.	`(value: string) => void`	—
`value*` Value of the checked item.	`string`	—

<DropdownMenuRadioItem>

One choice of a RadioGroup; picking it keeps the menu open.

children*
ReactNode
Label, optionally with a leading icon.
value*
string
Checked when it equals the group's value.
disabled
boolean
Shown but not selectable.

Prop	Type	Default
`children*` Label, optionally with a leading icon.	`ReactNode`	—
`value*` Checked when it equals the group's `value`.	`string`	—
`disabled` Shown but not selectable.	`boolean`	—

<DropdownMenuLabel>

Also accepts every <div> prop (none of its own).

<DropdownMenuSeparator>

* required. Every component also takes className.