Grouping actions

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.

Introduction

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

use Filament\Actions\Action;
use Filament\Actions\ActionGroup;

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

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

Using the keyboard

Dropdown action groups use menu keyboard navigation. You can open a group with Enter, Space or Arrow Down to focus its first action, or Arrow Up to focus its last action. Arrow Up and Arrow Down move between actions, including disabled actions, which cannot be activated. Escape closes the menu and returns focus to its trigger; Tab closes it and moves to the next focusable control. For nested groups, Arrow Right, Enter or Space opens the submenu. Arrow Left or Escape closes it and returns focus to its parent item.

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 may be used to customize the group trigger button:

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()

When you render multiple groups together, use distinct label() values so users can distinguish their triggers, including when only icons are visible. You may add a tooltip to the group trigger button using the tooltip() method:

use Filament\Actions\ActionGroup;

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

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:

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()

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

use Filament\Actions\ActionGroup;

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

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

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:

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. The dropdown may be set to a width by using the dropdownWidth() method. Options correspond to Tailwind’s max-width scale. The options are ExtraSmall, Small, Medium, Large, ExtraLarge, TwoExtraLarge, ThreeExtraLarge, FourExtraLarge, FiveExtraLarge, SixExtraLarge and SevenExtraLarge:

use Filament\Actions\ActionGroup;
use Filament\Support\Enums\Width;

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

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

use Filament\Actions\ActionGroup;

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

The dropdown content can have a maximum height using the maxHeight() method, so that it scrolls. You can pass a CSS length:

use Filament\Actions\ActionGroup;

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

Introduction

Guides

Resources

Tables

Schemas

Forms

Infolists

Actions

Notifications

Widgets

Configuration

Navigation

Users

Styling

Advanced

Testing

Plugins

Components

Deployment

Upgrading

Introduction

Using the keyboard

Customizing the group trigger style

Adding a tooltip to the group trigger button

Using a grouped button design

Adding dividers between actions

​Introduction

​Using the keyboard

​Customizing the group trigger style

​Adding a tooltip to the group trigger button

​Using a grouped button design

​Setting the placement of the dropdown

​Adding dividers between actions

​Setting the width of the dropdown

​Controlling the dropdown offset

​Controlling the maximum height of the dropdown

Introduction

Using the keyboard

Customizing the group trigger style

Adding a tooltip to the group trigger button

Using a grouped button design

Setting the placement of the dropdown

Adding dividers between actions

Setting the width of the dropdown

Controlling the dropdown offset

Controlling the maximum height of the dropdown