Button Menu

UiButtonMenu renders a button that opens a dropdown. Fill its #menu slot with UiButtonMenuItem, UiButtonMenuSubmenu, UiButtonMenuDivider, and UiButtonMenuText; items take their label from item-text.

Build a menu

<template>
  <UiButtonMenu variant="outline" text="Actions">
    <template #menu>
      <UiButtonMenuText item-text="Manage" />
      <UiButtonMenuItem item-text="Edit" icon="&#xe3c9;" />
      <UiButtonMenuItem item-text="Duplicate" icon="&#xe14d;" shortcut="Ctrl+D" />
      <UiButtonMenuDivider />
      <UiButtonMenuItem item-text="Delete" icon="&#xe872;" is-destructive />
    </template>
  </UiButtonMenu>
</template>

Add a submenu

<template>
  <UiButtonMenu text="More">
    <template #menu>
      <UiButtonMenuItem item-text="Share" icon="&#xe80d;" />
      <UiButtonMenuSubmenu item-text="Export" icon="&#xe2c6;" placement="right">
        <UiButtonMenuItem item-text="PDF" />
        <UiButtonMenuItem item-text="CSV" />
      </UiButtonMenuSubmenu>
    </template>
  </UiButtonMenu>
</template>

Keyboard

The menu follows the WAI-ARIA menu button pattern. Enter, Space, ↓ or ↑ on the button open the menu and focus its first item (↑ focuses the last).

After an item is picked from the keyboard, focus goes back to the button; after a click it stays where the click left it. Disabled items are skipped. The panel is a role="menu", items are menuitems (or menuitemcheckboxes with checked) and dividers are separators.

UiButtonMenu props

Takes UiButton's look and state props (id, text, title, variant, color, size, icon, iconVariant, iconTrailing, disabled, loading, rounded, fluid, customClass). The trigger is always a button, so the link props (to, href, as) and type don't apply. It adds:

Slots: menu (the dropdown content), icon (the trigger icon). Emits: click (with the MouseEvent).

UiButtonMenuItem props

UiButtonMenuSubmenu props

The submenu takes an item's look (itemText, icon, iconClass, iconStyle, iconTrailing, iconTrailingClass, iconTrailingStyle, badge, isDestructive, disabled, customClass) and fills its default slot with the nested items. → opens it on its first item and ← closes it.

CSS variables

The menu panel (.v-popper--theme-dropdown, shared by every dropdown) reads these variables. Set them on :root to restyle all menus. The mobile bottom sheet keeps its larger item padding and corners. Hover and pressed backgrounds come from the shared state layer.

:root {
  --cffy-dropdown-radius: var(--cffy-radius-md);
  --cffy-dropdown-item-active-bg-color: var(--cffy-primary-container);
  --cffy-dropdown-item-active-color: var(--cffy-on-primary-container);
}

Related components

• UiButtonMenuDivider — visual separator.
• UiButtonMenuText — non-interactive label (itemText).