Components
Button Menu
Dropdown menus with items, submenus, dividers, and labels.
UiButtonMenu renders a button that opens a dropdown. Fill it with UiButtonMenuItem, UiButtonMenuSubmenu, UiButtonMenuDivider, and UiButtonMenuText.
Build a menu
<template>
<UiButtonMenu variant="outline" text="Actions">
<UiButtonMenuText item-text="Manage" />
<UiButtonMenuItem item-text="Edit" icon="" />
<UiButtonMenuItem item-text="Duplicate" icon="" shortcut="Ctrl+D" />
<UiButtonMenuDivider />
<UiButtonMenuItem item-text="Delete" icon="" is-destructive />
</UiButtonMenu>
</template>
Add a submenu
<template>
<UiButtonMenu text="More">
<UiButtonMenuItem item-text="Share" icon="" />
<UiButtonMenuSubmenu item-text="Export" icon="" placement="right">
<UiButtonMenuItem item-text="PDF" />
<UiButtonMenuItem item-text="CSV" />
</UiButtonMenuSubmenu>
</UiButtonMenu>
</template>
UiButtonMenu props
Extends UiButton props, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
isMobile | boolean | — | Disable some positioning features on mobile. |
tooltipPlacement | Placement | — | Tooltip placement (top, bottom, left, right, …). |
Emits: onClick.
UiButtonMenuItem props
| Prop | Type | Default | Description |
|---|---|---|---|
itemText | string | — | Item label. |
icon | string | null | — | Leading Material Symbols code. |
iconTrailing | string | null | — | Trailing icon code. |
badge | Partial<IBadgeProps> | null | — | Inline badge config. |
shortcut | string | null | — | Shortcut hint (e.g. Ctrl+S). |
isDestructive | boolean | false | Destructive (danger) styling. |
disabled | boolean | false | Disable the item. |
Related components
UiButtonMenuSubmenu— nested submenu (itemText,icon,placement, …).UiButtonMenuDivider— visual separator.UiButtonMenuText— non-interactive label (itemText).