All components (204)

Actions menu

Actions · ActionMenu

What it is and when to use it

The three-dots menu: the actions of a row, a card or a record, gathered behind a button and opened in a floating panel attached to it. MenuItem is each action; this menu and the SplitButton one both use it, so the two look and sound the same.

When to use it

Several actions of equal weight on the same thing: view, duplicate, download, cancel.
On each row of a table or list, where loose buttons do not fit.
With sections to group with a title ("Documents", "Danger zone"), or with trigger to open it from a button with text. placement and offset say where the panel appears.

When not to

If there is one main action and the rest are variants of it: SplitButton.
If there are one or two actions, they go in plain sight: Button or IconButton.
To choose a value (a status, an order), not to do something: Select.

Keyboard: Enter, Space or Down Arrow on the button open the menu with focus on the first action, and Up Arrow on the last; the arrows move through it wrapping around and skipping disabled ones, Home and End go to the ends, and typing jumps to the action that starts that way; Enter and Space choose; Escape closes. Both on choosing and on closing, focus returns to the button. Opened with the mouse or from outside with open, focus enters the list and no action is marked. Disabled ones (disabled on the action, or disabledKeys on the menu) are visible, but cannot be chosen or reached.

Accessibility: label names the menu and, if there is no own trigger, also the three-dots button: let it say what they are for ("Order 1042 actions"), not "Menu". Actions with destructive are red and have their verb written out: color is never alone. Those with href are real links (another tab, copy the address), and if the application registers its router with the library's routing provider, they navigate with it.

Fine-tuning: no variables of its own: adjust it with the classes amset-menu, amset-menu__panel, amset-menu__action and amset-menu__action--danger; the panel width, with minWidth. The default button is an IconButton and accepts the --amset-button-*.

What it looks like

Open a menu and choose.

<ActionMenu
  label="Order 1042 actions"
  actions={[
    { key: 'view', label: 'View order' },
    { key: 'factura', label: 'Download the invoice', detail: 'PDF' },
    { key: 'anular', label: 'Void the order', destructive: true, separatedBefore: true },
  ]}
  onSelect={hacer}
/>

Props

Import it with import { ActionMenu } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What is announced on opening. "Actions for invoice F-2026-0007", not "Menu".
`onSelect`required	`(key: string) => void`	—
`actions`	`readonly MenuAction[]`	Flat list of actions. To group them with titles, use `sections`.
`className`	`string`	Merged with the library classes; it does not replace them.
`disabledKeys`	`readonly string[]`	Keys disabled all at once, without touching the list of actions.
`minWidth`	`string`	Minimum width of the panel, so it does not jump between states.
`offset`	`number`	Separation in pixels between the button and the menu.
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	Open state controlled from outside (for example, from a keyboard shortcut).
`placement`	`Placement`	Where the menu appears. By default, below and aligned to the end of the button.
`sections`	`readonly MenuSection[]`	Groups with a title: "Export", "Danger zone".
`size`	`"sm" \| "md" \| "lg"`	Size of the three-dot button by default.
`trigger`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	Custom trigger. By default, a three-dot button.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: