Dropdown
A click-triggered menu that opens anchored to the trigger element.
Basic usage
Trigger on click
Placement
Four directions
Nested submenus
items entries support a children array for cascading submenus (any depth); hover/click expands, selecting a leaf collapses and closes. The floating menu reuses oas-menu, so nested submenus automatically flip left/up near viewport edges to stay fully visible.
Nested submenus
Disabled items
Disabled items
Selection event
Selection event
Controlled display
The open attribute is controlled: an external button can set/remove open to show/hide the menu (clicking outside / pressing Esc / selecting an item still closes it).
Controlled display (open attribute)
Controlled selection
The value attribute is controlled: an external value sets the selected item (the dropdown shows no check mark, so a tag echoes the current value in real time); selecting a menu item also updates value and fires oas-select.
Controlled selection (value attribute)
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
items | Menu items JSON | string | [] |
open | Controlled display (boolean attribute; expands when present) | boolean | — |
placement | Popup placement | Placement | bottom |
value | Current selected value | string | — |
Events
| Event | Description |
|---|---|
oas-select | An item was selected, detail: { value } |
Slots
| Name | Description |
|---|---|
| default | — |
Clicking the trigger toggles visibility; clicking outside / pressing Esc / selecting an item closes it. The floating menu is an inner oas-menu (role="menu", leaf items menuitemradio, items with submenus menuitem) supporting cascading submenus and keyboard navigation.