> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Grouping actions

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/actions/grouping-actions.md).

## Introduction

You may group actions together into a dropdown menu by using an `ActionGroup` object. Groups may contain many actions, or other groups:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;

ActionGroup::make([
    Action::make('view'),
    Action::make('edit'),
    Action::make('delete'),
])
```

Loading preview

![Action group](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/actions/group/simple.jpg)

This page is about customizing the look of the group's trigger button and dropdown.

## Customizing the group trigger style

The button which opens the dropdown may be customized in the same way as a normal action. [All the methods available for trigger buttons](https://filament-34a8cf01.mintlify.site/4.x/actions/overview.md) may be used to customize the group trigger button:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;
use Filament\Support\Enums\Size;

ActionGroup::make([
    // Array of actions
])
    ->label('More actions')
    ->icon('heroicon-m-ellipsis-vertical')
    ->size(Size::Small)
    ->color('primary')
    ->button()
```

Loading preview

![Action group with custom trigger style](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/actions/group/customized.jpg)

Loading preview

![Table with button action group](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/actions/group-button.jpg)

When you render multiple groups together, use distinct `label()` values so users can distinguish their triggers, including when only icons are visible.

### Adding a tooltip to the group trigger button

You may add a tooltip to the group trigger button using the `tooltip()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;

ActionGroup::make([
    // Array of actions
])
    ->tooltip('Actions')
```

Loading preview

![Table with action group tooltip](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/tables/actions/group-tooltip.jpg)

### Using a grouped button design

Instead of a dropdown, an action group can render itself as a group of buttons. This design works with and without button labels. To use this feature, use the `buttonGroup()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;
use Filament\Support\Icons\Heroicon;

ActionGroup::make([
    Action::make('edit')
        ->color('gray')
        ->icon(Heroicon::PencilSquare)
        ->hiddenLabel(),
    Action::make('delete')
        ->color('gray')
        ->icon(Heroicon::Trash)
        ->hiddenLabel(),
])
    ->buttonGroup()
```

Loading preview

![Action group using the button group design](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/actions/group/button-group.jpg)

## Setting the placement of the dropdown

The dropdown may be positioned relative to the trigger button by using the `dropdownPlacement()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;

ActionGroup::make([
    // Array of actions
])
    ->dropdownPlacement('top-start')
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/actions/overview.md#action-utility-injection)
</details>

Loading preview

![Action group with top placement style](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/actions/group/placement.jpg)

Alternatively, you may let the dropdown position be automatically determined based on the available space using the `dropdownAutoPlacement()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;

ActionGroup::make([
    // Array of actions
])
    ->dropdownAutoPlacement()
```

## Adding dividers between actions

You may add dividers between groups of actions by using nested `ActionGroup` objects:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;

ActionGroup::make([
    ActionGroup::make([
        // Array of actions
    ])->dropdown(false),
    // Array of actions
])
```

The `dropdown(false)` method puts the actions inside the parent dropdown, instead of a new nested dropdown.

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/actions/overview.md#action-utility-injection)
</details>

Loading preview

![Action groups nested with dividers](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/actions/group/nested.jpg)

## Setting the width of the dropdown

The dropdown may be set to a width by using the `dropdownWidth()` method. Options correspond to [Tailwind's max-width scale](https://tailwindcss.com/docs/max-width). The options are `ExtraSmall`, `Small`, `Medium`, `Large`, `ExtraLarge`, `TwoExtraLarge`, `ThreeExtraLarge`, `FourExtraLarge`, `FiveExtraLarge`, `SixExtraLarge` and `SevenExtraLarge`:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;
use Filament\Support\Enums\Width;

ActionGroup::make([
    // Array of actions
])
    ->dropdownWidth(Width::ExtraSmall)
```

Loading preview

![Action group with custom dropdown width](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/actions/group/dropdown-width.jpg)

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/actions/overview.md#action-utility-injection)
</details>

## Controlling the dropdown offset

You may control the offset of the dropdown using the `dropdownOffset()` method, by default the offset is set to `8`.

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;

ActionGroup::make([
    // Array of actions
])
    ->dropdownOffset(16)
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/actions/overview.md#action-utility-injection)
</details>

## Controlling the maximum height of the dropdown

The dropdown content can have a maximum height using the `maxHeight()` method, so that it scrolls. You can pass a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length):

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\ActionGroup;

ActionGroup::make([
    // Array of actions
])
    ->maxHeight('400px')
```

<details>
  <summary />

  [Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/actions/overview.md#action-utility-injection)
</details>

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/packages/actions/docs/03-grouping-actions.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.