Introduction
Tabs organize content into multiple panels, reducing visible complexity:
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
Tabs::make('Tabs')
->tabs([
Tab::make('Tab 1')
->schema([
// ...
]),
Tab::make('Tab 2')
->schema([
// ...
]),
Tab::make('Tab 3')
->schema([
// ...
]),
])
label
string | Htmlable | Closure
The tabs container label.
An array of Tab components.
Default active tab
Set which tab is open by default:
Tabs::make('Tabs')
->tabs([
// ...
])
->activeTab(2)
The index of the active tab (1-based).
Tab icons
Add icons to tabs:
use Filament\Support\Icons\Heroicon;
Tabs::make('Tabs')
->tabs([
Tab::make('Notifications')
->icon(Heroicon::Bell)
->schema([
// ...
]),
])
icon
string | BackedEnum | Htmlable | Closure
The icon to display.
Icon position
Control icon position:
use Filament\Support\Enums\IconPosition;
Tab::make('Notifications')
->icon(Heroicon::Bell)
->iconPosition(IconPosition::After)
position
IconPosition | Closure
default:"IconPosition::Before"
The icon position (Before or After).
Tab badges
Display badges on tabs:
Tab::make('Notifications')
->badge(5)
badge
string | int | float | Closure
The badge content.
Badge color
Customize badge colors:
Tab::make('Notifications')
->badge(5)
->badgeColor('info')
Deferred badges
Load badges asynchronously for better performance:
Tabs::make('Tabs')
->key('notifications-tabs')
->tabs([
Tab::make('Notifications')
->badge(static fn (): int => Notification::query()->where('unread', true)->count())
->deferBadge()
->schema([
// ...
]),
])
The badge value must be from a closure when using deferBadge(). The Tabs component must have a key() set.
condition
bool | Closure
default:"true"
Whether to defer badge loading.
Grid columns in tabs
Customize the grid within tabs:
Tab::make('Tab 1')
->schema([
// ...
])
->columns(3)
The number of columns or responsive configuration.
Tabs::make('Tabs')
->tabs([
// ...
])
->scrollable(false)
condition
bool | Closure
default:"true"
Whether tabs are scrollable.
Vertical tabs
Render tabs vertically:
Tabs::make('Tabs')
->tabs([
// ...
])
->vertical()
condition
bool | Closure
default:"false"
Whether to render tabs vertically.
Removing the container
Remove the styled container:
Tabs::make('Tabs')
->tabs([
// ...
])
->contained(false)
condition
bool | Closure
default:"true"
Whether to use a container.
Persisting the active tab
In local storage
Persist the current tab in local storage:
Tabs::make('Tabs')
->tabs([
// ...
])
->persistTab()
->id('order-tabs')
condition
bool | Closure
default:"true"
Whether to persist the tab.
A unique ID for the tabs (required for persistence).
In query string
Persist the current tab in the URL:
Tabs::make('Tabs')
->tabs([
// ...
])
->persistTabInQueryString()
Tabs::make('Tabs')
->tabs([
// ...
])
->persistTabInQueryString('settings-tab')
key
string | Closure
default:"'tab'"
The query string parameter name.