ActionMenu

A dropdown menu for presenting contextual actions. Supports flat item lists or grouped items with labels, danger styling for destructive actions, keyboard shortcuts, and controlled open state. Built on Radix UI Dropdown Menu.

Import

import { ActionMenu } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<ActionMenu
  items={[
    { key: 'edit', label: 'Edit', onClick: () => handleEdit() },
    { key: 'duplicate', label: 'Duplicate', onClick: () => handleDuplicate() },
    { key: 'delete', label: 'Delete', danger: true, onClick: () => handleDelete() },
  ]}
/>

Grouped items

<ActionMenu
  items={[
    {
      label: 'Actions',
      items: [
        { key: 'edit', label: 'Edit', onClick: () => {} },
        { key: 'duplicate', label: 'Duplicate', onClick: () => {} },
      ],
    },
    {
      label: 'Danger zone',
      items: [
        { key: 'delete', label: 'Delete', danger: true, onClick: () => {} },
      ],
    },
  ]}
/>

Props

Prop	Type	Default	Description
`items`*	ActionMenuItem[] \| ActionMenuGroup[]	-	Menu items as a flat list or grouped with labels.
`trigger`	ReactNode	-	Custom trigger element. Defaults to a vertical ellipsis icon button.
`triggerLabel`	string	`'Actions'`	Accessible label for the default trigger button.
`align`	'start' \| 'center' \| 'end'	`'end'`	Horizontal alignment of the dropdown menu.
`side`	'top' \| 'right' \| 'bottom' \| 'left'	`'bottom'`	Side of the trigger where the menu appears.
`triggerClassName`	string	-	Additional CSS class for the trigger button.
`contentClassName`	string	-	Additional CSS class for the dropdown content.
`open`	boolean	-	Controlled open state of the menu.
`onOpenChange`	(open: boolean) => void	-	Callback fired when the open state changes.

ActionMenuItem

Property	Type	Description
`key`	`string`	Unique key for the item.
`label`	`string`	Display label.
`icon`	`ReactNode`	Optional icon displayed before the label.
`onClick`	`() => void`	Click handler for the item.
`disabled`	`boolean`	Whether the item is disabled.
`danger`	`boolean`	Applies destructive/danger styling.
`shortcut`	`string`	Keyboard shortcut hint text.

ActionMenuGroup

Property	Type	Description
`label`	`string`	Optional group label displayed above items.
`items`	`ActionMenuItem[]`	Items in this group.