npm i @velkin/react
import { VuDropdown } from "@velkin/react/dropdown";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | VuDropdownTrigger | "click" | Open interaction mode. Default: `"click"`. |
| placement | VuDropdownPlacement | "bottom" | Preferred side before collision flip. Default: `"bottom"`. |
| align | VuDropdownAlign | "center" | Alignment along the trigger edge. Default: `"center"`. |
| open | boolean | false | Whether the menu is visible. Default: `false`. |
| value | string | "" | Last selected row token. Default: `""`. |
| width | string | "auto" | Panel inline size preset or CSS length. Default: `"auto"`. |
| variant | VuDropdownVariant | "elevated" | Panel surface paint recipe. Default: `"elevated"`. |
| tone | VuDropdownTone | "normal" | Neutral surface weight. Default: `"normal"`. |
| size | VuDropdownSize | "md" | Panel padding scale; forwards to items without their own. Default: `"md"`. |
| itemColor | VuDropdownItemColor | "default" | Row intent forwarded to items without their own. Default: `"default"`. |
| radius | VuDropdownRadius | "md" | Panel corner preset (`sm`/`md`/`lg`; Role C′ omits `none`/`full`). Default: `"md"`. |
| maxHeight | string | "" | Max scroll region block size; empty uses stylesheet default. Default: `""`. |
| closeOnSelect | boolean | true | Close after a row activates. Default: `true`. |
| offset | number | 8 | Gap in px between trigger and panel. Default: `8`. |
| disabled | boolean | false | Blocks open and closes an open menu. Default: `false`. |
| Event | Detail | Description |
|---|---|---|
| vu-open-change | VuDropdownOpenChangeDetail | When `open` changes (`detail.open`). |
| vu-select | VuDropdownSelectDetail | When a row is activated. |
| vu-open | CustomEvent<void> | When the menu begins opening. |
| vu-close | CustomEvent<void> | When the menu begins closing. |
| Slot | Description |
|---|---|
| trigger | Clickable or hoverable control (typically `<vu-button>`). |
| — | - Menu rows (`<vu-dropdown-item>`), `<vu-divider>`, or `role="menuitem"`. |
| Part | Description |
|---|---|
| trigger | Wrapper around the trigger slot. |
| body | Positioned menu panel (`role="menu"`). |
| body-scroll | Scrollable inner wrapper when content exceeds max height. |
| Method | Description |
|---|---|
| show | - Sets `open` to true. |
| hide | - Sets `open` to false. |
| toggle | - Toggles `open`. |
| focus | - Focuses the slotted trigger control. |
| Name | Definition |
|---|---|
| VuDropdownAlign | |
| VuDropdownItemColor | |
| VuDropdownOpenChangeDetail | |
| VuDropdownPlacement | |
| VuDropdownRadius | |
| VuDropdownSelectDetail | |
| VuDropdownSize | |
| VuDropdownTone | |
| VuDropdownTrigger | |
| VuDropdownVariant | |
| VuDropdownWidthPreset | string | |