Dropdown
Contextual action menu anchored to a trigger. Supports icons, keyboard shortcuts, dividers, destructive items, disabled items, and left/right alignment.
import
{ DropdownMenu } from "@pepulux/ui"Default — with icons and divider
Actions button trigger, right-aligned panel. Divider separates destructive action.
With keyboard shortcuts
Pass shortcut to display a keyboard hint on the right side of each item.
Icon-only trigger — three-dot menu
Commonly used in table rows and cards for compact action menus.
Disabled items
Pass disabled: true on individual items. They appear dimmed and non-clickable.
Left alignment
Pass align='left' to anchor the panel to the left edge of the trigger.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger* | ReactNode | — | Element that opens the menu on click |
| items* | DropdownItem[] | — | Menu items — see DropdownItem props below |
| align | "left" | "right" | "right" | Horizontal alignment of the panel relative to the trigger |
| width | number | string | 216 | Panel width in pixels or CSS value |
| className | string | — | Additional CSS classes on the wrapper |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "item" | "divider" | "item" | item renders a button; divider renders a horizontal rule |
| label | string | — | Text label (item type) |
| icon | ReactNode | — | Leading 14px icon |
| shortcut | string | — | Keyboard shortcut hint shown on the right |
| destructive | boolean | false | Red text + red hover — use for permanent delete actions |
| disabled | boolean | false | Dims the item and blocks the click |
| onClick | () => void | — | Called when item is clicked (panel closes after) |