Skip to main content

​
Introduction

Filament automatically generates navigation for your panel based on your resources and pages. You can customize the navigation structure, groups, and appearance to match your needs. Organize navigation items into collapsible groups: 
use Filament\Navigation\NavigationGroup;

$panel->navigationGroups([
    NavigationGroup::make('User Management')
        ->icon('heroicon-o-users'),
    NavigationGroup::make('Content')
        ->icon('heroicon-o-document-text')
        ->collapsed(),
    NavigationGroup::make('Settings')
        ->icon('heroicon-o-cog-6-tooth')
        ->collapsible(false),
])

​
Using enums for groups

You can use enums to define navigation groups: 
use Filament\Navigation\NavigationGroup;

enum NavigationGroupLabel: string
{
    case UserManagement = 'User Management';
    case Content = 'Content';
    case Settings = 'Settings';

    public function getGroup(): NavigationGroup
    {
        return NavigationGroup::fromEnum($this);
    }
}
Register the enum: 
$panel->navigationGroups(NavigationGroupLabel::class)

​
Custom navigation items

Add custom navigation items that aren’t tied to resources or pages: 
use Filament\Navigation\NavigationItem;

$panel->navigationItems([
    NavigationItem::make('Analytics')
        ->url('https://analytics.example.com', shouldOpenInNewTab: true)
        ->icon('heroicon-o-chart-bar')
        ->group('Reports')
        ->sort(3),
    NavigationItem::make('Documentation')
        ->url('/docs')
        ->icon('heroicon-o-book-open')
        ->activeIcon('heroicon-s-book-open')
        ->isActiveWhen(fn (): bool => request()->is('docs*')),
])

​
Custom navigation builder

For complete control over navigation, provide a custom builder: 
use Filament\Navigation\NavigationBuilder;
use Filament\Navigation\NavigationGroup;
use Filament\Navigation\NavigationItem;

$panel->navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder
        ->groups([
            NavigationGroup::make('Main')
                ->items([
                    NavigationItem::make('Dashboard')
                        ->icon('heroicon-o-home')
                        ->url(fn (): string => Dashboard::getUrl()),
                    ...UserResource::getNavigationItems(),
                    ...PostResource::getNavigationItems(),
                ]),
            NavigationGroup::make('Settings')
                ->items([
                    ...SettingsPage::getNavigationItems(),
                ]),
        ]);
})
When using a custom navigation builder, automatic navigation generation is disabled. You must explicitly include all resources and pages you want to appear.

​
Disabling navigation

Disable navigation entirely to create a single-page panel: 
$panel->navigation(false)

​
Top navigation

Switch from sidebar navigation to a top navigation bar: 
$panel->topNavigation()
This moves navigation items to a horizontal bar below the header.

​
Collapsible sidebar

Make the sidebar collapsible: 
$panel->sidebarCollapsibleOnDesktop()
Customize the sidebar width: 
$panel->sidebarWidth('18rem')

​
Collapsed width

Set the width when collapsed: 
$panel->collapsedSidebarWidth('4rem')

​
Resource navigation

Customize how resources appear in navigation: 
use Filament\Resources\Resource;

class UserResource extends Resource
{
    protected static ?string $navigationIcon = 'heroicon-o-users';
    
    protected static ?string $navigationLabel = 'Team Members';
    
    protected static ?string $navigationGroup = 'User Management';
    
    protected static ?int $navigationSort = 1;
    
    protected static ?string $navigationBadgeTooltip = 'Active users';

    public static function getNavigationBadge(): ?string
    {
        return static::getModel()::count();
    }

    public static function getNavigationBadgeColor(): string|array|null
    {
        return static::getModel()::count() > 10 ? 'warning' : 'success';
    }
}

​
Hiding resources from navigation

protected static bool $shouldRegisterNavigation = false;

​
Active navigation icons

Specify a different icon for when the resource is active: 
protected static ?string $navigationIcon = 'heroicon-o-users';
protected static ?string $activeNavigationIcon = 'heroicon-s-users';

​
Page navigation

Customize how pages appear in navigation: 
use Filament\Pages\Page;

class Settings extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-cog-6-tooth';
    
    protected static ?string $navigationLabel = 'App Settings';
    
    protected static ?string $navigationGroup = 'Settings';
    
    protected static ?int $navigationSort = 10;

    public static function getNavigationBadge(): ?string
    {
        return 'New';
    }
}

​
Nested navigation

Nest pages under other navigation items: 
protected static ?string $navigationParentItem = 'Settings';
Add sub-navigation tabs within a page: 
use Filament\Pages\Page;

class Settings extends Page
{
    public function getSubNavigationItems(): array
    {
        return [
            'general' => NavigationItem::make('General')
                ->url(fn (): string => static::getUrl(['tab' => 'general']))
                ->isActiveWhen(fn (): bool => request()->query('tab') === 'general'),
            'security' => NavigationItem::make('Security')
                ->url(fn (): string => static::getUrl(['tab' => 'security']))
                ->isActiveWhen(fn (): bool => request()->query('tab') === 'security'),
        ];
    }
}
Breadcrumbs are automatically generated based on navigation hierarchy.

​
Disabling breadcrumbs

$panel->breadcrumbs(false)

​
Customizing breadcrumbs

Override breadcrumbs in resources or pages: 
public function getBreadcrumbs(): array
{
    return [
        '/admin' => 'Home',
        '/admin/users' => 'Users',
        '/admin/users/1/edit' => 'John Doe',
    ];
}
The global search appears in the navigation bar and searches across all resources that have enabled it. 
$panel->globalSearch(false)

​
Customizing search keybinding

$panel->globalSearchKeyBindings(['command+k', 'ctrl+k'])

​
Configuring search debounce

$panel->globalSearchDebounce('500ms')

​
User menu

Customize the user menu in the navigation bar: 
use Filament\Navigation\MenuItem;

$panel->userMenuItems([
    MenuItem::make()
        ->label('Settings')
        ->url(fn (): string => Settings::getUrl())
        ->icon('heroicon-o-cog-6-tooth'),
    'profile' => MenuItem::make()
        ->label('Edit profile'),
    // 'logout' is automatically added
])
Filament uses Heroicons by default. You can use any Heroicon name: 
protected static ?string $navigationIcon = 'heroicon-o-users';
protected static ?string $navigationIcon = 'heroicon-o-document-text';
protected static ?string $navigationIcon = 'heroicon-o-cog-6-tooth';
You can also register custom icon sets in your panel configuration.

Build docs developers (and LLMs) love

Get started for freeTalk to us