# Action Menu

Enable users to trigger actions from a list in a popover when space is limited.

Tabs: [Guidelines](/components/web/action-menu/action-menu.guidelines.md) · [Code](/components/web/action-menu/action-menu.code.md)

## Features

- The menu can be triggered by any type of button.

- Supports destructive actions.

- Supports items with icons and descriptions.

- Items can be grouped with separators.

- Supports items that behave like radio buttons.

## Examples

### Trigger

The trigger can be any type of button, including custom buttons.

```tsx
<ActionMenu>
    <ActionMenu.Trigger>
        <Button variant="secondary" IconLeft={Download}>
            Download
        </Button>
    </ActionMenu.Trigger>
    <ActionMenu.Content>
        <ActionMenu.Item>Mileage expenses</ActionMenu.Item>
        <ActionMenu.Item>Employee balance statement</ActionMenu.Item>
    </ActionMenu.Content>
</ActionMenu>
```

### Destructive

Destructive actions are actions that result in significant and often irreversible consequences, such as data deletion or permanent changes. When an action is destructive, add the `isDestructive` prop to the item to change its appearance. Place destructive actions at the bottom of the list to prevent users from accidentally clicking them.

```tsx
<ActionMenu>
    <ActionMenu.Trigger>
        <IconButton variant={'secondary'} tooltipProps={{content: 'Actions'}} Icon={Options} />
    </ActionMenu.Trigger>
    <ActionMenu.Content>
        <ActionMenu.Item>Edit</ActionMenu.Item>
        <ActionMenu.Item>Close budget early</ActionMenu.Item>
        <ActionMenu.Item>Download expenses</ActionMenu.Item>
        <ActionMenu.Item isDestructive>Delete</ActionMenu.Item>
    </ActionMenu.Content>
</ActionMenu>
```

### Separator

Place separators between groups of actions that are related to each other. For example, you might group actions by type, such as editing, sharing, and destructive actions.

```tsx
<ActionMenu>
    <ActionMenu.Trigger>
        <IconButton variant={'secondary'} tooltipProps={{content: 'Actions'}} Icon={Options} />
    </ActionMenu.Trigger>
    <ActionMenu.Content>
        <ActionMenu.Item>Edit</ActionMenu.Item>
        <ActionMenu.Item>Duplicate</ActionMenu.Item>
        <ActionMenu.Separator />
        <ActionMenu.Item>Share</ActionMenu.Item>
        <ActionMenu.Item>Add to favorites</ActionMenu.Item>
        <ActionMenu.Separator />
        <ActionMenu.Item isDestructive>Delete</ActionMenu.Item>
    </ActionMenu.Content>
</ActionMenu>
```

### Icon

Add icons to help users understanding the meaning of actions. Icons can also make actions more recognisable and distinguishable. This can help users quickly find the action they're looking for. Note, either add icons to all of the actions in an `ActionMenu` or none of them.

```tsx
<ActionMenu>
    <ActionMenu.Trigger>
        <IconButton variant={'secondary'} tooltipProps={{content: 'Actions'}} Icon={Options} />
    </ActionMenu.Trigger>
    <ActionMenu.Content>
        <ActionMenu.Item Icon={Pen}>Edit</ActionMenu.Item>
        <ActionMenu.Item Icon={Copy}>Duplicate</ActionMenu.Item>
        <ActionMenu.Separator />
        <ActionMenu.Item Icon={Share}>Share</ActionMenu.Item>
        <ActionMenu.Item Icon={Heart}>Add to favorites</ActionMenu.Item>
        <ActionMenu.Separator />
        <ActionMenu.Item Icon={Trash} isDestructive>
            Delete
        </ActionMenu.Item>
    </ActionMenu.Content>
</ActionMenu>
```

### Description

Add a description when an action is not self-explanatory. Note, you don't need to add a description to every action.

```tsx
<ActionMenu>
    <ActionMenu.Trigger>
        <IconButton
            variant={'secondary'}
            tooltipProps={{content: 'Actions', side: 'right'}}
            Icon={Options}
        />
    </ActionMenu.Trigger>
    <ActionMenu.Content>
        <ActionMenu.Item description="Change your details">Edit</ActionMenu.Item>
        <ActionMenu.Item description="You can always revert this later">
            Close budget early
        </ActionMenu.Item>
        <ActionMenu.Item description="In CSV or PDF">Download expenses</ActionMenu.Item>
        <ActionMenu.Separator />
        <ActionMenu.Item isDestructive description="Watch out, you can’t undo this">
            Delete
        </ActionMenu.Item>
    </ActionMenu.Content>
</ActionMenu>
```

### Disabled item

You can disable an item to prevent users from interacting with it while still displaying it. This is useful when an action is not applicable in the current context or when the user does not have permission to perform the action.

```tsx
<ActionMenu>
    <ActionMenu.Trigger>
        <IconButton variant={'secondary'} tooltipProps={{content: 'Actions'}} Icon={Options} />
    </ActionMenu.Trigger>
    <ActionMenu.Content>
        <ActionMenu.Item>Edit</ActionMenu.Item>
        <ActionMenu.Item disabled>Close budget early</ActionMenu.Item>
        <ActionMenu.Item>Download expenses</ActionMenu.Item>
        <ActionMenu.Separator />
        <ActionMenu.Item isDestructive>Delete</ActionMenu.Item>
    </ActionMenu.Content>
</ActionMenu>
```

### Radio Group

Actions can be mutually exclusive. For example, you might want to let users choose between a list, gallery, or timeline view. In cases like this, use `ActionMenu.RadioItem` components and wrap them in an `ActionMenu.RadioGroup` component. The items will now behave like radio buttons, and only one can be selected at a time.

```tsx
const RadioGroupExample = () => {
    const [menuValue, setMenuValue] = React.useState('1')
    return (
        <ActionMenu>
            <ActionMenu.Trigger>
                <IconButton
                    variant={'secondary'}
                    tooltipProps={{content: 'Change view'}}
                    Icon={Options}
                />
            </ActionMenu.Trigger>
            <ActionMenu.Content>
                <ActionMenu.RadioGroup value={menuValue} onValueChange={setMenuValue}>
                    <ActionMenu.RadioItem value="1" Icon={Gallery}>
                        Gallery
                    </ActionMenu.RadioItem>
                    <ActionMenu.RadioItem value="2" Icon={CalendarClock}>
                        Timeline
                    </ActionMenu.RadioItem>
                </ActionMenu.RadioGroup>
            </ActionMenu.Content>
        </ActionMenu>
    )
}
render(<RadioGroupExample />)
```

## Best practices

**Do:** Use an Action Menu when space is limited

**Don't:** Use an Action Menu when there is sufficient space to use buttons

**Do:** Use an Action Menu when there are at least two actions.

**Don't:** Use an Action Menu when there is only a single action.

**Do:** Order the actions by importance and frequency of use.

**Don't:** Order the actions randomly.

**Do:** Use short and descriptive labels.

**Don't:** Use long and repetitive labels.

## Related components

- [Button](/components/web/button/button.guidelines): A clickable element which communicates that users can trigger an action.
- [Button group](/components/web/button-group/button-group.guidelines): A layout component used to group multiple related actions a user can take.
- [Icon button](/components/web/icon-button/icon-button.guidelines): Enables users to control the visibility of other UI elements.