const items = [
  { id: 'view', label: 'View events' },
  { id: 'config', label: 'Configure sensors' },
  { id: 'graph', label: 'View graph', divider: true },
  { id: 'delete', label: 'Delete site', variant: 'destructive' },
]

<WildMenu :items="items" @select="run">
  <template #trigger="{ toggle }">
    <WildButton variant="borders" size="sm" icon="chevron-down" @click="toggle">Actions</WildButton>
  </template>
</WildMenu>

When to use

Use it for actions on one record, such as a site row in a table.
Use it when the trigger is your own button, or actions need a description or a divider.

Don’t use it

To switch a view or choose a value. Use Dropdown.
For a kebab of plain actions with no descriptions or dividers. Use Icon menu.
For one or two actions that fit on the row. Use Button.

Dividers and descriptions

A divider closes a group of actions. Put the destructive action last, after a divider.

View events

Configure sensors

View graph

Delete site

grouped

View eventsOpens the event log

Configure sensorsOpens sensor settings

Delete site

descriptions, one disabled

// grouped
const items = [
  { id: 'view', label: 'View events' },
  { id: 'config', label: 'Configure sensors' },
  { id: 'graph', label: 'View graph', divider: true },
  { id: 'delete', label: 'Delete site', variant: 'destructive' },
]

// descriptions, one disabled
const items = [
  { id: 'view', label: 'View events', description: 'Opens the event log' },
  { id: 'config', label: 'Configure sensors', description: 'Opens sensor settings', disabled: true, divider: true },
  { id: 'delete', label: 'Delete site', variant: 'destructive' },
]

Both menus end on a divider and the destructive action. A disabled action keeps its place, so the list doesn’t shift.

Content

Start each action with a verb, and name the object: View events, Delete site.
Use sentence case, and keep labels to one line.
Add a description only when the label can’t say what happens, and put the consequence there.
Confirm a destructive action with a confirm dialog.

Accessibility

The trigger announces a menu and whether it’s open. An icon trigger needs an aria-label that names the record.

Key	What it does
Enter / Space	On the trigger, opens on the first action. In the menu, runs the action.
Down / Up	On the trigger, opens on the first or last action. In the menu, moves and wraps.
Home / End	Moves to the first or last action.
A letter	Moves to the next action starting with it.
Escape	Closes the menu and returns focus to the trigger.
Tab	Closes the menu and moves on.

Props

Prop	Type	Default	Description
items	MenuItem[]	[]	The actions, in order.
align	'start' \| 'end'	'start'	Trigger edge the menu aligns to.
placement	'bottom' \| 'top'	'bottom'	Preferred side; flips when there isn’t room.
minWidth	number	200	Narrowest width in px; grows to fit.
maxHeight	number	400	Height in px past which it scrolls.
closeOnSelect	boolean	true	Closes after an action is picked.
@select	(item: MenuItem) => void	—	Fires with the picked item.
#trigger	slot { toggle, open }	—	The button that opens the menu.
Item id	string	—	Identifies the action in @select.
Item label	string	—	The action’s text.
Item icon	string	—	Icon name, shown before the label.
Item description	string	—	A second line under the label.
Item disabled	boolean	false	Blocks the action; arrow keys skip it.
Item variant	'default' \| 'destructive'	'default'	Destructive turns the action red.
Item divider	boolean	false	A rule after this action.

Tokens

Token	Value	Where it lands
--global-neutral-grey-500	#E6E6E6	Menu border and dividers.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	Menu elevation.
--radius-lg	8px	Menu corners.
--global-cool-grey-1200	#24262B	Action label.
--global-cool-grey-900	#595E6A	Icon and description.
--global-neutral-grey-300	#F1F1F1	Action hover.
--global-red-900	#BC1C1C	Destructive label.
--global-red-100	#FEEBEB	Destructive hover.
--global-neutral-grey-800	#ADACB0	Disabled label and icon.
--global-blue-1000	#1877F2	Keyboard focus ring.