Menubar

A visually persistent menu common in desktop applications. While a menu is open, hovering another trigger switches to it and ← / → move between menus. Menus that don't fit collapse into a trailing "More" menu.

Usage

SMenubar() {
  SMenubarMenu() {
    SMenubarTrigger({ text: 'File' })
    SMenubarContent() {
      SMenubarItem({ text: 'New Tab', shortcut: '⌘T', onSelect: () => ... })
      SMenubarItem({ text: 'New Window', shortcut: '⌘N' })
      SMenubarSeparator()
      SMenubarItem({ text: 'Print…', shortcut: '⌘P' })
    }
  }
  SMenubarMenu() {
    SMenubarTrigger({ text: 'View' })
    SMenubarContent() {
      SMenubarCheckboxItem({ text: 'Always Show Bookmarks Bar', checked: this.bookmarks!! })
    }
  }
  SMenubarMenu() {
    SMenubarTrigger({ text: 'Profiles' })
    SMenubarContent() {
      SMenubarRadioGroup({ value: this.profile!! }) {
        SMenubarRadioItem({ value: 'andy', text: 'Andy' })
        SMenubarRadioItem({ value: 'benoit', text: 'Benoit' })
      }
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Responsive

The bar measures its own width. Narrow it and the trailing menus move into "More", listed under their names.

Column() { SMenubar() { ... } }.width(this.narrow ? 200 : '100%')

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SMenubar

shadcn-vue Menubar: a horizontal bar (h-9 rounded-md border p-1 shadow-xs) of menu triggers, each opening an anchored dropdown below it. While one menu is open, hovering (or tapping) another trigger switches to it, and ← / → move between menus.

Responsive: the bar measures itself; menus whose triggers don't fit collapse into a trailing "More" (ellipsis) trigger listing their items under labels. On compact touch screens menus open as bottom sheets.

Prop	Type	Default	Description
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

Slots: children (trailing closure)

SMenubarMenu

One menu of the bar: a trigger plus its content.

Slots: children (trailing closure)

SMenubarTrigger

rounded-sm px-2 py-1 text-sm font-medium, accent while its menu is open.

Prop	Type	Default	Description
text	ResourceStr	''

SMenubarContent

The menu's dropdown: bg-popover min-w-[12rem] rounded-md border p-1 shadow-md, below its trigger.

Prop	Type	Default	Description
panelWidth	number	192	panel width in vp (min-w-[12rem] = 192); rows size against it
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

Slots: children (trailing closure)

SMenubarItem

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

SMenubarCheckboxItem

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

SMenubarRadioGroup

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)

SMenubarRadioItem

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

SMenubarLabel

Prop	Type	Default	Description
text	ResourceStr	''
inset	boolean	false

SMenubarSeparator

No props.

SMenubarGroup

Slots: children (trailing closure)