Filament: Add Custom Navigation Items

Filament allows you to add custom navigation items that can also link to external sources. In this tutorial, we will see all the options and how they look visually.

Adding navigation items is done in the panel provider inside the navigationItems() method, adding them as an array. Navigation items can have the same options as any link, such as icon, group, etc.

use Filament\Navigation\NavigationItem;
 
$panel
    // ...
    ->navigationItems([
        NavigationItem::make('Documentation')
            ->url('https://filamentphp.com/docs', shouldOpenInNewTab: true)
            ->icon('heroicon-o-book-open')
            ->group('External'),
    ]);

Of course, links can be added to an internal Filament page. In this case, you should add an active state for the link using the isActiveWhen() method.

use Filament\Navigation\NavigationItem;
 
$panel
    // ...
    ->navigationItems([
        NavigationItem::make('Documentation')
            ->url('https://filamentphp.com/docs', shouldOpenInNewTab: true)
            ->icon('heroicon-o-book-open')
            ->group('External'),
        NavigationItem::make('Profile') 
            ->label(fn (): string => __('filament-panels::pages/auth/edit-profile.label'))
            ->url(fn () => EditProfile::getUrl())
            ->icon('heroicon-o-user-circle')
            ->isActiveWhen(fn (): bool => request()->routeIs(EditProfile::getRouteName())), 
    ]);