Dropdown
A layered menu surface for grouped actions and navigation. Uses Floating UI positioning, supports nested submenus, and accepts custom trigger content via slot.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
theme | 'light' | 'dark' | 'dark' | Per-component theme override. |
open | boolean | false | Controls whether the dropdown panel is visible. Mutable and can be controlled externally. |
disabled | boolean | false | Disables trigger interaction. |
submenu | boolean | false | Nested submenu mode. Uses side placement and submenu keyboard behavior. |
placement | Floating placement string | 'bottom-start' | Preferred dropdown placement relative to trigger. |
strategy | 'fixed' | 'absolute' | 'fixed' | Floating positioning strategy. |
offsetPx | number | 6 | Gap in pixels between trigger and panel. |
matchTriggerWidth | boolean | false | When true, panel min-width matches trigger width. |
closeOnSelect | boolean | true | Close panel after selecting an item. |
triggerLabel | string | 'Options' | Fallback trigger text when no trigger slot is supplied. |
triggerVariant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'secondary' | Fallback trigger button variant. |
triggerSize | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Fallback trigger button size. |
triggerIcon | string | 'none' | Fallback trigger icon name. |
hideTriggerLabel | boolean | false | Hides fallback trigger label visually (icon-only trigger). |
Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
toggle | { open: boolean } | Yes | Emitted when menu visibility changes. |
select | { value?: string; label?: string } | Yes | Emitted when a menu item is selected. |
Methods
| Name | Signature | Description |
|---|---|---|
show | () => Promise<void> | Programmatically opens the dropdown (no-op when disabled). |
hide | () => Promise<void> | Programmatically closes the dropdown. |
toggleOpen | () => Promise<void> | Toggles open state. |
Slots
| Name | Description |
|---|---|
trigger | Optional custom trigger element. Overrides built-in diwa-button trigger. |
| (default) | Dropdown panel content. Supply menuitem buttons/links and optional nested diwa-dropdown nodes. |
CSS custom properties
| Property | Fallback | Description |
|---|---|---|
--diwa-bg-elevated | Token | Panel background colour. |
--diwa-border | Token | Panel border colour. |
--diwa-radius-md | Token | Panel corner radius. |
--diwa-shadow-lg | Token | Panel shadow/elevation. |
--diwa-text-primary | Token | Menu item text colour. |
--diwa-bg-hover | Token | Menu item hover background. |