Overlays and menus
MenuButton
A complete menu trigger with accessible menu attributes, roving keyboard navigation, and custom select events.
Curated demo
Reference
A complete menu trigger with accessible menu attributes, roving keyboard navigation, and custom select events.
- MenuButton is the easy composition for a trigger plus dropdown menu.
- It emits snurble-menu-select when an item is chosen.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | — | Trigger id. |
label * | string | — | Trigger label. |
items | MenuButtonItem[] | — | Menu items. |
variant | 'primary' | 'secondary' | 'danger' | 'secondary' | Trigger variant. |
size | 'sm' | 'md' | 'lg' | 'md' | Trigger size. |
placement | 'bottom' | 'top' | 'bottom' | Menu placement. |
align | 'start' | 'end' | 'start' | Menu alignment. |
class | string | — | Additional CSS classes. |
Example snippet
<MenuButton label="Actions" items={[{ label: "Duplicate", value: "duplicate" }]} />