Filament Sub-Navigation for Resources: How it Looks

Filament allows you to make a resource sub-navigation. Typically, all pages in sub-navigation belong to a record. In this tutorial, we will see all the options and how they look visually.

For example, we can add a view and edit page to the post's sub-navigation. Pages are registered on the resource using the getRecordSubNavigation() method.

public static function getRecordSubNavigation(Page $page): array
{
    return $page->generateNavigationItems([
        Pages\ViewPost::class,
        Pages\EditPost::class,
    ]);
}

By default, Filament adds navigation to the left side. The position can be changed in the $subNavigationPosition property. By default, its value is SubNavigationPosition::Start.

You can change it to SubNavigationPosition::Top to make it look like tabs.

use Filament\Pages\SubNavigationPosition;
 
protected static SubNavigationPosition $subNavigationPosition = SubNavigationPosition::Top;

Or, you can change it to SubNavigationPosition::End to move to the right side.

use Filament\Pages\SubNavigationPosition;
 
protected static SubNavigationPosition $subNavigationPosition = SubNavigationPosition::End;

Also, you can add relation pages to the sub-navigation.

public static function getRecordSubNavigation(Page $page): array
{
    return $page->generateNavigationItems([
        Pages\ViewPost::class,
        Pages\EditPost::class,
        Pages\ManagePostComments::class, 
    ]);
}