Filament: Collapse Sidebar Menu (with or without icons)

Filament allows you to make a sidebar collapsible on a desktop. In this tutorial, we will see all the options and how they look visually.

There are two methods to enable a collapsible sidebar: sidebarCollapsibleOnDesktop() and sidebarFullyCollapsibleOnDesktop().

When you use either of the options, an arrow icon will appear as a toggle button.

What's the difference between sidebarCollapsibleOnDesktop() and sidebarFullyCollapsibleOnDesktop()?

When you enable the collapsible sidebar using the sidebarCollapsibleOnDesktop(), you can see the navigation icons, and on hover, a tooltip with a navigation item label appears.

return $panel
    // ...
    ->sidebarCollapsibleOnDesktop();

When you have groups, they aren't shown because there is not enough space to fit text. If you want to show groups, there is a workaround. Then, you need to create a group with an icon. This way, when the sidebar is collapsed, instead of navigation items, a group will be seen. When you press on the group, a dropdown will show the navigation links for that group.

return $panel
    // ...
    ->sidebarCollapsibleOnDesktop()
    ->navigationGroups([
        NavigationGroup::make('Shop')
            ->icon('heroicon-o-shopping-bag'),
        NavigationGroup::make('Blog')
            ->icon('heroicon-o-document-text'),
    ])

With the sidebarFullyCollapsibleOnDesktop() method, everything is hidden, and only an icon button to toggle sidebar is shown.

return $panel
    // ...
    ->sidebarFullyCollapsibleOnDesktop();