A contextual action menu that opens on click. Supports icons, grouped items, keyboard navigation, and custom alignment.
Basic Example
A simple action menu with icons:
No preview available
Example
Highlighting code...
Grouped Items
Organize menu items into visual groups using children. Groups have headers but
keyboard navigation moves through all leaf items.
No preview available
Example
Props
- items: Array of menu items (objects or primitives)
- fields: Remap your data keys to component fields
- label: Button label
- icon: Button icon
- align: Dropdown alignment (
start,end) - direction: Open direction (
down,up) - showArrow: Show dropdown arrow
- disabled: Disable the menu
- class: Additional CSS classes
Snippets
- itemContent(proxy): Custom rendering for menu items
- groupContent(proxy): Custom rendering for group headers
- [name](proxy): Per-item snippet — set
item.snippet = 'name'
ProxyItem API
Snippets receive a ProxyItem instance:
- proxy.label: Mapped display text
- proxy.icon: Mapped icon class
- proxy.href: Mapped href (renders an
<a>) - proxy.value: The original raw item (object or primitive)
- proxy.disabled: Whether the item is disabled
- proxy.get('field'): Read any field by name
Events
- onselect(value, proxy): Fired when an item is selected — receives the raw item value and its ProxyItem