# Actions menu (goodtabs UI)

A trigger that opens a menu of actions with icons, shortcut hints and submenus.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/actions-menu.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/actions-menu`

## Usage

```tsx
import { ActionsMenu } from "@/components/ui/actions-menu"

<ActionsMenu
  label="Actions for Q3 report"
  items={[
    { type: "item", label: "Rename", icon: <PencilIcon />, shortcut: "R", onSelect: rename },
    { type: "separator" },
    { type: "sub", label: "Move to", items: [{ type: "item", label: "Archive", onSelect: archive }] },
    { type: "separator" },
    { type: "item", label: "Delete", icon: <Trash2Icon />, onSelect: remove, destructive: true },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `({ type: "item"; label; icon?; shortcut?; onSelect; destructive? } | { type: "separator" } | { type: "sub"; label; icon?; items })[]` |  | The menu, in order. Separators split items into groups. |
| label | `string` | `"More actions"` | Accessible name of the default ellipsis trigger. |
| trigger | `ReactNode` |  | Your own trigger element. Defaults to a ghost ellipsis icon button. |
| align | `"start" | "center" | "end"` | `"end"` | Where the menu lines up with the trigger. |

## When to use

- Secondary actions on a row, card or header that do not deserve their own buttons
- Three to ten actions that fall into natural groups
- When one action moves the thing somewhere: the submenu lists the destinations

## When not to use

- One or two actions; show them as buttons
- Choosing a value rather than running an action; use a select
- Actions on a right click; use the context actions

## Notes for agents

- It takes functions (items[].onSelect), so the component rendering it must be a client component
- Shortcut strings are hints only; bind the keys yourself and keep the two in sync
- Put destructive: true on the last item of the last group; it uses the destructive menu item variant
- A custom trigger must forward refs and props (a shadcn Button does); the default is a ghost icon-sm pill named by label

Docs: https://ui.goodtabs.co/components/actions-menu