Note

This documentation describes the MenuButton Vue component for native UI views for Xml templates see menu-button.

MenuButton

A button that opens a DropdownMenu when clicked. Can be configured with explicit items, or can look up a named menu from the ViewModel context.

Import

import { MenuButton } from '@neos/app'

Props

Prop	Type	Default	Description
label	string	undefined	Button label text
icon	string	undefined	PrimeIcons class for the button icon
name	string	undefined	Context menu key to look up menu items from the ViewModel
items	MenuItem[]	undefined	Explicit list of menu items
variant	string	'default'	Button visual variant
size	Size	'medium'	Button size
badge	string	undefined	Badge value shown on the button
badgeSeverity	string	undefined	Badge severity (color)
animated	boolean	true	Enable loading animation

Usage Examples

Explicit menu items

const menuItems = [
  { label: 'Export CSV', icon: 'pi pi-file', command: () => exportCsv() },
  { label: 'Export Excel', icon: 'pi pi-file-excel', command: () => exportExcel() },
  { separator: true },
  { label: 'Print', icon: 'pi pi-print', command: () => print() }
]

<MenuButton label="Export" icon="pi pi-chevron-down" :items="menuItems" />

Named context menu from ViewModel

<MenuButton name="rowContextMenu" icon="pi pi-ellipsis-v" />

Secondary variant with badge

<MenuButton
  label="Notifications"
  icon="pi pi-bell"
  badge="5"
  badge-severity="danger"
  variant="secondary"
  :items="notificationItems"
/>