Dropdown
Contextual action menu anchored to a trigger. Figma trigger types: Button (simple, advanced, link), Icon, Account (avatar, button, card, breadcrumb), Search and Integrations — plus the Context menu. Supports icons, supporting text, shortcuts, checks, dividers, destructive items, scrollbar and left/right alignment.
{ DropdownMenu, DropdownTrigger, AccountTrigger, ContextMenu } 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.
Trigger: Button — simple, advanced, link
DropdownTrigger variants; chevron={false} hides the chevron (Figma Chevron dropdown).
Trigger: Account — avatar, button, card, breadcrumb
Account list items use avatar, description and checked.
Search and scrollbar
searchable adds a filter box; maxHeight makes a long list scroll. Open by default via defaultOpen.
Integrations — grid layout
Context menu
Right-click the area.
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 |
| placement | "bottom" | "top" | "bottom" | Open below or above the trigger |
| layout | "list" | "grid" | "list" | list items or grid tiles (Figma Integrations) |
| searchable | boolean | — | Search box that filters items (Figma Search simple / advanced) |
| header / footer | ReactNode | — | Custom content above / below the items |
| maxHeight | number | string | 320 | Scroll after this height (Figma Scrollbar) |
| defaultOpen / open / onOpenChange | boolean / boolean / (open) => void | — | Uncontrolled or controlled open state (Figma Open) |
| keepOpen | boolean | — | Keep the menu open after choosing an item |
| 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 |
| description | string | — | Supporting text under the label |
| avatar | ReactNode | — | Avatar before the label (account list item) |
| checked | boolean | — | Check mark on the right (selected account / option) |
| 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) |