Dropdown
A flexible menu component for selecting actions or options. Easily handles lists, groups, and nested items in a clean. Supports switches, disabled items, custom triggers.
Default
Custom Trigger
Groups
Submenus
Switches
Props
| Name | Default | Type |
|---|---|---|
button | - | ButtonProps Button configuration (label, icon, size, variant, etc.) |
options | [] | DropdownOptions Array of dropdown options or grouped options |
placement | "left" | string Placement of the dropdown relative to the trigger |
side | "bottom" | "top" | "bottom" | "right" | "left" Side of the trigger the dropdown appears on |
offset | 4 | number Offset in pixels between trigger and dropdown |
Slots
| Slot | Payload |
|---|---|
default | { [key: string]: any; open: boolean; close: () => void; } Default slot for custom trigger content (receives `open`, `close`, and extra attrs) |
item | { item: DropdownOption; close: () => void; } Custom rendering for each dropdown item (receives `item` and `close`) |