Dropdown Menu

A menu of actions triggered by a button. Anchored on pointer / wide screens; a bottom sheet with touch-sized rows on compact touch screens — automatically.

Usage

SDropdownMenu() {
  SDropdownMenuTrigger() { SButton({ text: 'Open', variant: 'outline' }) }
  SDropdownMenuContent() {
    SDropdownMenuLabel({ text: 'My Account' })
    SDropdownMenuSeparator()
    SDropdownMenuItem({ text: 'Profile', icon: 'user', shortcut: '⇧⌘P', onSelect: () => ... })
    SDropdownMenuItem({ text: 'Settings', icon: 'settings', shortcut: '⌘S' })
    SDropdownMenuSeparator()
    SDropdownMenuItem({ text: 'Log out', icon: 'log-out', variant: 'destructive' })
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Checkbox & radio items

SDropdownMenuCheckboxItem({ text: 'Status Bar', checked: this.statusBar!! })
SDropdownMenuRadioGroup({ value: this.panelPosition!! }) {
  SDropdownMenuRadioItem({ value: 'top', text: 'Top' })
  SDropdownMenuRadioItem({ value: 'bottom', text: 'Bottom' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SDropdownMenu

shadcn-vue DropdownMenu. Anchored menu on pointer / wide screens; on compact touch screens it automatically becomes a bottom sheet with touch-sized rows (adaptive: 'auto'). Long menus scroll within the space available next to the trigger.

Items report activation through onSelect (a .onClick() chained on an item does not fire: the row's own click — which also serves keyboard and screen readers — takes it).

Prop	Type	Default	Description
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }

Slots: children (trailing closure)

SDropdownMenuTrigger

Slots: children (trailing closure)

SDropdownMenuContent

bg-popover min-w-[8rem] rounded-md border p-1 shadow-md, or a bottom sheet on compact touch screens.

Prop	Type	Default	Description
side	SparkSide SparkSide = 'top' | 'right' | 'bottom' | 'left'	'bottom'
alignment	SparkAlign SparkAlign = 'start' | 'center' | 'end'	'start'
sideOffset	number	4
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'
panelWidth	number	224	panel width in vp (shadcn examples use w-56 = 224); children size against it
tokens	SparkSurfaceTokens	{}	Per-instance surface token overrides (instance → theme tokens → recipe), see {@link SparkSurfaceTokens}.

Slots: children (trailing closure)

SDropdownMenuItem

Action row; closes the menu after activation (unless keepOpen).

Prop	Type	Default	Description
text	ResourceStr	''
icon	string | undefined	undefined
shortcut	string | undefined	undefined
variant	MenuItemVariant MenuItemVariant = 'default' | 'destructive'	'default'
disabled	boolean	false
inset	boolean	false
keepOpen	boolean	false	keep the menu open after activation

Event	Type	Default	Description
onSelect	() => void	() => { }	reka-style select event: tap, click, Space / Enter and screen-reader activation

SDropdownMenuCheckboxItem

Item with a check mark; toggles checked. Uncontrolled (defaultChecked) values are remembered across openings, keyed by value (default: the label).

Prop	Type	Default	Description
value	string	''	identity for the uncontrolled memory (default: the label)
text	ResourceStr	''
shortcut	string | undefined	undefined
checked!!	boolean | undefined	undefined
defaultChecked	boolean	false
disabled	boolean	false

Event	Type	Default	Description
onCheckedChange	(v: boolean) => void	() => { }

SDropdownMenuRadioGroup

Single-choice group. Uncontrolled (defaultValue) values are remembered across openings, keyed by name (default: the defaultValue — give groups sharing a defaultValue distinct names).

Prop	Type	Default	Description
name	string	''	identity for the uncontrolled memory (default: the defaultValue)
value!!	string | undefined	undefined
defaultValue	string	''

Event	Type	Default	Description
onValueChange	(v: string) => void	() => { }

Slots: children (trailing closure)

SDropdownMenuRadioItem

Prop	Type	Default	Description
value	string	''
text	ResourceStr	''
disabled	boolean	false

SDropdownMenuLabel

Prop	Type	Default	Description
text	ResourceStr	''
inset	boolean	false

SDropdownMenuSeparator

No props.

SDropdownMenuGroup

Slots: children (trailing closure)