Appearance
Dropdown Menu
SDropdownMenu is a dropdown action menu attached to a trigger. It is built on Reka UI (portal, keyboard navigation, roving focus, menu/menuitem roles). The entries come from the items prop: items, separators (separator), and group labels (label); leading icons are rendered with the reusable SIcon.
Basic usage
Item icons
The item's icon field renders a leading icon with SIcon (a registry name or a raw path).
Positioning
The side (where the menu appears) and align (alignment along that side) props control the menu position relative to the trigger.
External control
The open state is bound with v-model:open, so it can be controlled from an external button.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
square | boolean | undefined | Square corners: removes the menu rounding (rounded by default). |
items | {
type?:
| "label"
| "item"
| "separator";
label?: string;
value?: string;
icon?: string;
disabled?: boolean;
danger?: boolean
}[] | undefined | Menu entries (alternative to the default slot). |
side | | "right"
| "left"
| "top"
| "bottom" | "bottom" | Side of the trigger the menu appears on. |
align | "start" | "center" | "end" | "start" | Alignment along the chosen side. |
side-offset | number | 8 | Offset from the trigger in pixels. |
modal | boolean | false | Modal mode: blocks interaction with the background and enables a focus trap. false by
default, so page scroll is not locked (otherwise the scrollbar disappears on open and the
layout shifts). |
aria-label | string | undefined | Accessible name of the menu (aria-label). |
flat | boolean | undefined | Removes the shadow. Overridden by the elevation prop when it is set. |
elevation | 0 | 1 | 2 | 3 | 4 | 5 | undefined | Shadow level 0–5 (scale); 0 means no shadow. Overrides flat. |
open | boolean | false | Whether the menu is open. Two-way binding via v-model:open. |
Events
| Name | Signature | Description |
|---|---|---|
update:open | (value: boolean) => void | Emitted when open changes. Used for two-way binding (v-model:open). |
select | (value: string) => void | A menu item was selected; receives the item's value. |
Slots
| Name | Description |
|---|---|
trigger | Trigger element that opens the menu on click. |
default | Custom menu content (instead of the items prop). |