ActionMenu

Stable

A compact “more actions” menu built from an array, ideal for table rows and cards.

ActionMenu is a convenience over DropdownMenu for the common overflow pattern: an icon button that reveals row-level or card-level actions. Describe the actions as data (labels, icons, shortcuts, separators, groups and submenus) and it renders an accessible menu. Use DropdownMenu directly when you need checkable items or custom content.

Source Edit docs Report an issue

Overview

tsx

import { ActionMenu, Icon } from '@bindshq/stance-react';
import type { ActionMenuItem } from '@bindshq/stance-react';

const signatureActions: ActionMenuItem[] = [
  { label: 'Edit signature', icon: <Icon name="pencil" />, shortcut: '⌘E' },
  { label: 'Duplicate', icon: <Icon name="copy" /> },
  { label: 'Preview in Outlook', icon: <Icon name="eye" /> },
  { type: 'separator' },
  { label: 'Delete', icon: <Icon name="trash" />, destructive: true },
];

export function Basic() {
  return <ActionMenu items={signatureActions} />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

import { ActionMenu, type ActionMenuItem } from '@bindshq/stance-react';

Examples

Groups and submenus

tsx

import { ActionMenu, Icon } from '@bindshq/stance-react';

export function GroupsAndSubmenus() {
  return (
    <ActionMenu
      label="Template options"
      orientation="vertical"
      items={[
        {
          type: 'group',
          label: 'Template',
          items: [
            { label: 'Customise', icon: <Icon name="sliders" /> },
            { label: 'Rename', icon: <Icon name="pencil" /> },
          ],
        },
        {
          label: 'Export',
          icon: <Icon name="download" />,
          items: [{ label: 'HTML file' }, { label: 'PNG image' }, { label: 'Copy to clipboard' }],
        },
        { label: 'Assign to department', icon: <Icon name="users" />, disabled: true },
        { type: 'separator' },
        { label: 'Archive template', icon: <Icon name="inbox" />, destructive: true },
      ]}
    />
  );
}

In a table row

Give each trigger a unique label so screen-reader users know which row it acts on.

Amara Okafor

Ben Hughes

Chen Wei

tsx

import { ActionMenu, Icon } from '@bindshq/stance-react';

export function InARow() {
  const people = ['Amara Okafor', 'Ben Hughes', 'Chen Wei'];
  return (
    <div style={{ width: '100%', maxWidth: 520 }}>
      {people.map((name) => (
        <div
          key={name}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '10px 4px',
            borderBottom: '1px solid var(--st-color-separator)',
            fontSize: 'var(--st-font-size-sm)',
          }}
        >
          <span>{name}</span>
          <ActionMenu
            label={`Actions for ${name}`}
            items={[
              { label: 'Edit signature', icon: <Icon name="pencil" /> },
              { label: 'Resend invite', icon: <Icon name="send" /> },
              { type: 'separator' },
              { label: 'Remove from organisation', icon: <Icon name="trash" />, destructive: true },
            ]}
          />
        </div>
      ))}
    </div>
  );
}

Custom trigger

tsx

import { ActionMenu, Button, Icon } from '@bindshq/stance-react';
import type { ActionMenuItem } from '@bindshq/stance-react';

const signatureActions: ActionMenuItem[] = [
  { label: 'Edit signature', icon: <Icon name="pencil" />, shortcut: '⌘E' },
  { label: 'Duplicate', icon: <Icon name="copy" /> },
  { label: 'Preview in Outlook', icon: <Icon name="eye" /> },
  { type: 'separator' },
  { label: 'Delete', icon: <Icon name="trash" />, destructive: true },
];

export function CustomTrigger() {
  return (
    <ActionMenu
      trigger={
        <Button variant="outline" size="sm" trailingIcon={<Icon name="chevron-down" />}>
          Manage
        </Button>
      }
      items={signatureActions}
    />
  );
}

API reference

Prop	Type	Default	Description
`items`* required	`ActionMenuItem[]`	None	Actions: `{ label, onSelect, icon, shortcut, destructive, disabled, items }`, `{ type: "separator" }` or `{ type: "group", label, items }`.
`label`	`string`	`'More actions'`	Accessible label of the default trigger. Make it specific in lists.
`trigger`	`ReactElement`	None	Replace the default icon button (rendered with asChild).
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal or vertical ellipsis icon.
`size`	`'xs' \| 'sm' \| 'md'`	`'sm'`	Size of the default trigger.
`side / align`	`Side / Align`	`'bottom' / 'end'`	Menu placement.
`open / defaultOpen / onOpenChange`	`boolean / function`	None	Open state.
`disabled`	`boolean`	`false`	Disable the trigger.

Accessibility

The default trigger is an IconButton with an accessible name; pass a row-specific label such as “Actions for Ben Hughes”.
Inherits the complete DropdownMenu keyboard model: arrows, Home/End, typeahead, submenus and Escape.
Focus returns to the trigger after an action is chosen.

Keyboard

Keys	Action
`Enter` `Space` `ArrowDown`	Open and focus the first action.
`ArrowDown` `ArrowUp`	Move between actions.
`Enter`	Run the focused action.
`Escape`	Close without acting.

Usage guidelines

Do

Show the primary row action inline and put the rest in the ActionMenu.
Put destructive actions last, after a separator.

Don’t

Hide the only way to perform an important action inside an overflow menu.

Overview

tsx

import { ActionMenu, Icon } from '@bindshq/stance-react';
import type { ActionMenuItem } from '@bindshq/stance-react';

const signatureActions: ActionMenuItem[] = [
  { label: 'Edit signature', icon: <Icon name="pencil" />, shortcut: '⌘E' },
  { label: 'Duplicate', icon: <Icon name="copy" /> },
  { label: 'Preview in Outlook', icon: <Icon name="eye" /> },
  { type: 'separator' },
  { label: 'Delete', icon: <Icon name="trash" />, destructive: true },
];

export function Basic() {
  return <ActionMenu items={signatureActions} />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Examples

In a table row

Give each trigger a unique label so screen-reader users know which row it acts on.

Amara Okafor

Ben Hughes

Chen Wei

tsx

import { ActionMenu, Icon } from '@bindshq/stance-react';

export function InARow() {
  const people = ['Amara Okafor', 'Ben Hughes', 'Chen Wei'];
  return (
    <div style={{ width: '100%', maxWidth: 520 }}>
      {people.map((name) => (
        <div
          key={name}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '10px 4px',
            borderBottom: '1px solid var(--st-color-separator)',
            fontSize: 'var(--st-font-size-sm)',
          }}
        >
          <span>{name}</span>
          <ActionMenu
            label={`Actions for ${name}`}
            items={[
              { label: 'Edit signature', icon: <Icon name="pencil" /> },
              { label: 'Resend invite', icon: <Icon name="send" /> },
              { type: 'separator' },
              { label: 'Remove from organisation', icon: <Icon name="trash" />, destructive: true },
            ]}
          />
        </div>
      ))}
    </div>
  );
}

API reference

Prop	Type	Default	Description
`items`* required	`ActionMenuItem[]`	None	Actions: `{ label, onSelect, icon, shortcut, destructive, disabled, items }`, `{ type: "separator" }` or `{ type: "group", label, items }`.
`label`	`string`	`'More actions'`	Accessible label of the default trigger. Make it specific in lists.
`trigger`	`ReactElement`	None	Replace the default icon button (rendered with asChild).
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal or vertical ellipsis icon.
`size`	`'xs' \| 'sm' \| 'md'`	`'sm'`	Size of the default trigger.
`side / align`	`Side / Align`	`'bottom' / 'end'`	Menu placement.
`open / defaultOpen / onOpenChange`	`boolean / function`	None	Open state.
`disabled`	`boolean`	`false`	Disable the trigger.

Accessibility

The default trigger is an IconButton with an accessible name; pass a row-specific label such as “Actions for Ben Hughes”.

Inherits the complete DropdownMenu keyboard model: arrows, Home/End, typeahead, submenus and Escape.

Focus returns to the trigger after an action is chosen.

Keyboard

Keys	Action
`Enter` `Space` `ArrowDown`	Open and focus the first action.
`ArrowDown` `ArrowUp`	Move between actions.
`Enter`	Run the focused action.
`Escape`	Close without acting.

Overview

Light, dark and high contrast

Import

Examples

Groups and submenus

In a table row

Custom trigger

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Examples

Groups and submenus

In a table row

Custom trigger

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related