DropdownMenu

A Radix-backed action menu with leading icons, Kbd shortcut hints, and a danger ramp for destructive items — composed via statics.

Import

import { Bell, Users, X } from "@roger-emerson/ploxum-icons";
import { Button, DropdownMenu, Icon } from "@roger-emerson/ploxum-primitives";

Usage

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button variant="ghost">Incident actions</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content width={220}>
    <DropdownMenu.Label>INC-2041 — Gate 4</DropdownMenu.Label>
    <DropdownMenu.Item icon={<Icon decorative icon={Users} />} onSelect={assign} shortcut="A">
      Assign to me
    </DropdownMenu.Item>
    <DropdownMenu.Item icon={<Icon decorative icon={Bell} />} onSelect={snooze}>
      Snooze 15 min
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item destructive icon={<Icon decorative icon={X} />} onSelect={discard}>
      Discard incident
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Props

DropdownMenu (root)

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial state.
`onOpenChange`	`(open: boolean) => void`	—	Open-state callback.
`children`	`ReactNode`	—	Trigger + Content.

DropdownMenu.Trigger

Radix Trigger passthrough — use asChild to wrap your own Button.

DropdownMenu.Content

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to the trigger.
`sideOffset`	`number`	`6`	Gap from the trigger in px.
`width`	`number`	—	Fixed width in px. Defaults to content-sized with a 180px floor.
`className`	`string`	—	Merged onto the panel.

Also accepts the remaining Radix DropdownMenu.Content props (side, collisionPadding, …).

DropdownMenu.Item

Prop	Type	Default	Description
`onSelect`	`(event: Event) => void`	—	Fires on selection (click or Enter).
`icon`	`ReactNode`	—	Leading icon. Inherits the item's text color, including danger on destructive items.
`shortcut`	`string`	—	Keyboard shortcut hint, rendered right-aligned in a `Kbd`.
`destructive`	`boolean`	—	Renders the item in the danger ramp. Always pair with `icon`.
`disabled`	`boolean`	—	Dims the item and removes it from pointer/keyboard flow.
`className`	`string`	—	Merged onto the item.

DropdownMenu.Separator / DropdownMenu.Label

Both take only className (Label also takes children). Label renders the uppercase tertiary group heading.

Design rules

Destructive items must pair destructive with an icon — the danger state reads by shape as well as color.
shortcut is a hint chip only; the menu does not bind the key. Register the actual handler where the command lives (usually the CommandPalette's action map).
The panel animates a 200ms fade/scale on the cubic-bezier(0.25, 1, 0.5, 1) ease — within the motion budget, no spring. Don't extend it.
DropdownMenu is a menu: focus moves into it and returns on close. For non-modal anchored surfaces that must not trap focus, use Popover (heuristic 9).

Storybook

Open DropdownMenu in Storybook ↗