Context Menu

A menu of actions for an area, opened with a right click at the pointer (mouse / touchpad) or a long press at the finger (touch). Becomes a bottom sheet on compact touch screens.

Usage

SContextMenu() {
  SContextMenuTrigger() { /* any area */ }
  SContextMenuContent() {
    SContextMenuItem({ text: 'Back', shortcut: '⌘[', onSelect: () => ... })
    SContextMenuItem({ text: 'Forward', shortcut: '⌘]', disabled: true })
    SContextMenuItem({ text: 'Reload', shortcut: '⌘R', onSelect: () => ... })
    SContextMenuSeparator()
    SContextMenuCheckboxItem({ text: 'Show Bookmarks', checked: this.bookmarks!! })
    SContextMenuCheckboxItem({ text: 'Show Full URLs', checked: this.urls!! })
    SContextMenuSeparator()
    SContextMenuLabel({ text: 'People', inset: true })
    SContextMenuRadioGroup({ value: this.person!! }) {
      SContextMenuRadioItem({ value: 'pedro', text: 'Pedro Duarte' })
      SContextMenuRadioItem({ value: 'colm', text: 'Colm Tuite' })
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SContextMenu

shadcn-vue ContextMenu: a menu opened on the trigger area with a right click (pointer, at the pointer position) or a long press (touch, at the finger). On compact touch screens it becomes a bottom sheet.

Prop	Type	Default	Description
disabled	boolean	false

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

Slots: children (trailing closure)

SContextMenuTrigger

The area that opens the menu: right mouse button → at the pointer; touch long-press (500 ms without moving more than 10 vp) → at the finger. Long-press uses a touch timer (a LongPressGesture loses to inner buttons).

Slots: children (trailing closure)

SContextMenuContent

bg-popover min-w-[8rem] rounded-md border p-1 shadow-md at the pointer; bottom sheet on compact touch.

Prop	Type	Default	Description
panelWidth	number	208	panel width in vp (shadcn demo: w-52 = 208); rows size against it
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

Slots: children (trailing closure)

SContextMenuItem

Action row; closes the menu after activation (unless keepOpen). Tap, click, Space / Enter and screen-reader activation fire onSelect (a .onClick() chained on the item does not fire).

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

Event	Type	Default	Description
onSelect	() => void	() => { }

SContextMenuCheckboxItem

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	() => { }

SContextMenuRadioGroup

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)

SContextMenuRadioItem

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

SContextMenuLabel

Prop	Type	Default	Description
text	ResourceStr	''
inset	boolean	false

SContextMenuSeparator

No props.

SContextMenuGroup

Slots: children (trailing closure)