ActionMenu

The <ActionMenu> component is the kebab-menu pattern: a trigger button with no visible label that opens a small menu of contextual quick actions. Reach for it when an item, row, or surface has a handful of actions that don't all need to be visible at once.

The trigger is a <Button> with an ellipsis icon. It inherits its appearance from the surrounding context, so it is ghost inside a <Panel.Header> or toolbar and falls back to the standard secondary button on its own. On small screens the popover is replaced by a <Tray> so the menu remains usable on touch devices.

For text-labelled menus that anchor primary navigation use <Menu> instead. For a flat group of always-visible buttons use <ButtonGroup>.

Anatomy

• Trigger, a <Button> with the ellipsis icon. It adopts the surrounding variant, so it is ghost inside a header or toolbar and secondary on its own.
• Popover on desktop, Tray on mobile. The floating surface that holds the menu.
• Menu items, written as <ActionMenu.Item>, one per action.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

ActionMenu's trigger is a slot-aware <Button>. On its own it renders as the standard secondary button, and inside a <Panel.Header>, <SelectList.Option>, or <ButtonGroup> it inherits that container's variant and size so the menu blends into the row or toolbar it sits on. Set variant or size on the <ActionMenu> to override the inherited values.

The variant above styles the trigger only. Menu items carry their own variant: mark an item with variant="destructive" for high-impact actions (see Destructive actions), or with variant="master" or variant="admin" for actions restricted to internal roles — these render a lock or key icon in the matching access color (see the Admin- and Mastermark pattern).

Usage

ActionMenu shines wherever a row or item has more actions than fit comfortably in a toolbar. Tables, list rows, file-browser items, and notification cards all benefit from the kebab pattern: the row stays clean, and the actions are one click away.

import { ActionMenu } from '@marigold/components';export default () => (  <ActionMenu    aria-label="Item actions"    onAction={action => alert(`Action: ${String(action)}`)}  >    <ActionMenu.Item id="edit">Edit</ActionMenu.Item>    <ActionMenu.Item id="duplicate">Duplicate</ActionMenu.Item>    <ActionMenu.Item id="archive">Archive</ActionMenu.Item>    <ActionMenu.Item id="delete" variant="destructive">      Delete    </ActionMenu.Item>  </ActionMenu>);

Mobile behaviour

On small screens the popover is replaced with a <Tray> automatically. No extra wiring is needed. The trigger position and accessibility behaviour stay the same. The items just open in a bottom sheet instead of an anchored popover.

Destructive actions

Actions with significant or irreversible consequences should use variant="destructive" on the relevant <ActionMenu.Item>. Pair destructive actions with a confirmation dialog when the action can't be undone. See Button: Destructive buttons for the underlying guidance.

Use inside a container

A container can publish shared defaults for every ActionMenu inside. A row that reveals actions on hover, for example, can pin the trigger size, default placement, or aria-label so each individual ActionMenu stays free of repetitive props.

Props

ActionMenu

ActionMenu.Item

ActionMenu.Section

Alternative components

• Menu: Use for text-labelled menus where the trigger reads like a primary control.
• Button: Use for always-visible contextual actions. Group several with <ButtonGroup>.
• Dialog: Use when an action requires confirmation or additional input.