diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/ActiveIcon.php b/docs-assets/app/app/Livewire/Panels/Navigation/ActiveIcon.php
new file mode 100644
index 00000000000..d00e9ca5dcb
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/ActiveIcon.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class ActiveIcon extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Settings Inactive')
+                    ->url(fn (): string => '#')
+                    ->activeIcon('heroicon-o-document-text')
+                    ->icon('heroicon-o-cog'),
+                NavigationItem::make('')
+                    ->label('Settings Active')
+                    ->url(fn (): string => '#')
+                    ->isActiveWhen(fn() => request()->path() === 'panels/navigation/active-icon')
+                    ->activeIcon('heroicon-s-cog')
+                    ->icon('heroicon-s-cog'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/Badge.php b/docs-assets/app/app/Livewire/Panels/Navigation/Badge.php
new file mode 100644
index 00000000000..a66fb965741
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/Badge.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class Badge extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Orders')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-shopping-cart')
+                    ->badge(24),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/BadgeColor.php b/docs-assets/app/app/Livewire/Panels/Navigation/BadgeColor.php
new file mode 100644
index 00000000000..529b505d473
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/BadgeColor.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+use Filament\Support\Colors\Color;
+
+class BadgeColor extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Orders')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-shopping-cart')
+                    ->badge(32, Color::Red),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/BadgeTooltip.php b/docs-assets/app/app/Livewire/Panels/Navigation/BadgeTooltip.php
new file mode 100644
index 00000000000..f101e08e760
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/BadgeTooltip.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class BadgeTooltip extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Users')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-user-group')
+                    ->badge(12)
+                    ->badgeTooltip('The number of users'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/ChangeIcon.php b/docs-assets/app/app/Livewire/Panels/Navigation/ChangeIcon.php
new file mode 100644
index 00000000000..da34a5e5756
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/ChangeIcon.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class ChangeIcon extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Settings')
+                    ->url(fn (): string => '#')
+                    ->icon('heroicon-o-document-text'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/CustomItems.php b/docs-assets/app/app/Livewire/Panels/Navigation/CustomItems.php
new file mode 100644
index 00000000000..9caf8e575f4
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/CustomItems.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Pages\Dashboard;
+use Filament\Navigation\NavigationItem;
+
+class CustomItems extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make('Analytics')
+                    ->url('https://filament.pirsch.io', shouldOpenInNewTab: true)
+                    ->icon('heroicon-o-presentation-chart-line')
+                    ->group('Reports')
+                    ->sort(3),
+                NavigationItem::make('dashboard')
+                    ->label(fn (): string => __('filament-panels::pages/dashboard.title'))
+                    ->url(fn (): string => Dashboard::getUrl())
+                    ->isActiveWhen(fn () => request()->routeIs('filament.admin.pages.dashboard')),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/DisabledNavigation.php b/docs-assets/app/app/Livewire/Panels/Navigation/DisabledNavigation.php
new file mode 100644
index 00000000000..a630971405f
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/DisabledNavigation.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+
+class DisabledNavigation extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigation(false);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/Group.php b/docs-assets/app/app/Livewire/Panels/Navigation/Group.php
new file mode 100644
index 00000000000..74bd5395d3c
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/Group.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class Group extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Bank Accounts')
+                    ->url(fn(): string => '#')
+                    ->group('Settings')
+                    ->icon('heroicon-o-currency-dollar'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/GroupCollapsible.php b/docs-assets/app/app/Livewire/Panels/Navigation/GroupCollapsible.php
new file mode 100644
index 00000000000..0306f313a61
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/GroupCollapsible.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationGroup;
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class GroupCollapsible extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationGroups([
+                NavigationGroup::make('Settings')->collapsed()
+            ])
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Bank Accounts')
+                    ->url(fn(): string => '#')
+                    ->group('Settings')
+                    ->icon('heroicon-o-currency-dollar'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/GroupNotCollapsible.php b/docs-assets/app/app/Livewire/Panels/Navigation/GroupNotCollapsible.php
new file mode 100644
index 00000000000..024a64eb949
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/GroupNotCollapsible.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Navigation\NavigationGroup;
+use Filament\Navigation\NavigationItem;
+use Filament\Pages\Page;
+
+class GroupNotCollapsible extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationGroups([
+                NavigationGroup::make('Settings')->collapsible(false)
+            ])
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Bank Accounts')
+                    ->url(fn(): string => '#')
+                    ->group('Settings')
+                    ->icon('heroicon-o-currency-dollar'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/SidebarCollapsibleOnDesktop.php b/docs-assets/app/app/Livewire/Panels/Navigation/SidebarCollapsibleOnDesktop.php
new file mode 100644
index 00000000000..462ebd336c5
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/SidebarCollapsibleOnDesktop.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class SidebarCollapsibleOnDesktop extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Products')
+                    ->sort(2)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+            ])
+            ->sidebarCollapsibleOnDesktop();
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/SidebarFullyCollapsibleOnDesktop.php b/docs-assets/app/app/Livewire/Panels/Navigation/SidebarFullyCollapsibleOnDesktop.php
new file mode 100644
index 00000000000..0a11e189b61
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/SidebarFullyCollapsibleOnDesktop.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class SidebarFullyCollapsibleOnDesktop extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Products')
+                    ->sort(2)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+            ])
+            ->sidebarFullyCollapsibleOnDesktop();
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/SortItems.php b/docs-assets/app/app/Livewire/Panels/Navigation/SortItems.php
new file mode 100644
index 00000000000..afb50b9d54c
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/SortItems.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Navigation\NavigationItem;
+
+class SortItems extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make()
+                    ->label('Products')
+                    ->badge("2")
+                    ->sort(2)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+                NavigationItem::make('')
+                    ->label('Orders')
+                    ->badge("1")
+                    ->sort(1)
+                    ->icon('heroicon-o-document-text')
+                    ->url(fn (): string => '#'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Panels/Navigation/TopNavigation.php b/docs-assets/app/app/Livewire/Panels/Navigation/TopNavigation.php
new file mode 100644
index 00000000000..9bd7a56b6a3
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/TopNavigation.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Livewire\Panels\Navigation;
+
+use Filament\Pages\Page;
+use Filament\Pages\Dashboard;
+use Filament\Navigation\NavigationItem;
+
+class TopNavigation extends Page
+{
+    protected static string $view = 'livewire.panels.navigation.empty';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->navigationItems([
+                NavigationItem::make('Analytics')
+                    ->url('https://filament.pirsch.io', shouldOpenInNewTab: true)
+                    ->icon('heroicon-o-presentation-chart-line')
+                    ->group('Reports')
+                    ->sort(3),
+                NavigationItem::make('dashboard')
+                    ->label(fn (): string => __('filament-panels::pages/dashboard.title'))
+                    ->url(fn (): string => Dashboard::getUrl())
+                    ->isActiveWhen(fn () => request()->routeIs('filament.admin.pages.dashboard')),
+            ])
+            ->topNavigation();
+    }
+}
diff --git a/docs-assets/app/app/Livewire/Topbar.php b/docs-assets/app/app/Livewire/Panels/Navigation/UserMenuCustomization.php
similarity index 71%
rename from docs-assets/app/app/Livewire/Topbar.php
rename to docs-assets/app/app/Livewire/Panels/Navigation/UserMenuCustomization.php
index f0961014ce8..04bfc77708a 100644
--- a/docs-assets/app/app/Livewire/Topbar.php
+++ b/docs-assets/app/app/Livewire/Panels/Navigation/UserMenuCustomization.php
@@ -1,13 +1,13 @@
 <?php
 
-namespace App\Livewire;
+namespace App\Livewire\Panels\Navigation;
 
 use Filament\Navigation\MenuItem;
 use Filament\Pages\Page;
 
-class Topbar extends Page
+class UserMenuCustomization extends Page
 {
-    protected static string $view = 'livewire.topbar';
+    protected static string $view = 'livewire.panels.navigation.empty';
 
     public function mount()
     {
diff --git a/docs-assets/app/database/factories/PostFactory.php b/docs-assets/app/database/factories/PostFactory.php
index ba2c7fbc7a4..3743df70a84 100644
--- a/docs-assets/app/database/factories/PostFactory.php
+++ b/docs-assets/app/database/factories/PostFactory.php
@@ -2,11 +2,12 @@
 
 namespace Database\Factories;
 
+use App\Models\Post;
 use App\Models\User;
 use Illuminate\Database\Eloquent\Factories\Factory;
 
 /**
- * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
+ * @extends Factory<Post>
  */
 class PostFactory extends Factory
 {
diff --git a/docs-assets/app/database/factories/UserFactory.php b/docs-assets/app/database/factories/UserFactory.php
index d4e88356126..4ec67d3a7ff 100644
--- a/docs-assets/app/database/factories/UserFactory.php
+++ b/docs-assets/app/database/factories/UserFactory.php
@@ -2,11 +2,12 @@
 
 namespace Database\Factories;
 
+use App\Models\User;
 use Illuminate\Database\Eloquent\Factories\Factory;
 use Illuminate\Support\Str;
 
 /**
- * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\User>
+ * @extends Factory<User>
  */
 class UserFactory extends Factory
 {
diff --git a/docs-assets/app/resources/views/livewire/actions.blade.php b/docs-assets/app/resources/views/livewire/actions.blade.php
index 0ba06b02bd6..ee36b3c4e59 100644
--- a/docs-assets/app/resources/views/livewire/actions.blade.php
+++ b/docs-assets/app/resources/views/livewire/actions.blade.php
@@ -1,3 +1,5 @@
+@php use Filament\Actions\ActionGroup; @endphp
+@php use Filament\Actions\Action; @endphp
 <div class="min-h-screen">
     @if (! count($this->mountedActions))
         <div id="buttonAction" class="p-16 flex items-center justify-center max-w-xl">
@@ -70,52 +72,52 @@
 
         <div id="actionGroup" class="pr-40 pt-8 pb-40 flex items-center justify-center max-w-xl">
             <x-filament-actions::group :actions="[
-                \Filament\Actions\Action::make('view'),
-                \Filament\Actions\Action::make('edit'),
-                \Filament\Actions\Action::make('delete'),
-            ]" />
+                Action::make('view'),
+                Action::make('edit'),
+                Action::make('delete'),
+            ]"/>
         </div>
 
         <div id="customizedActionGroup" class="pr-24 pt-8 pb-40 flex items-center justify-center max-w-xl">
             <x-filament-actions::group
-                :actions="[
-                    \Filament\Actions\Action::make('view'),
-                    \Filament\Actions\Action::make('edit'),
-                    \Filament\Actions\Action::make('delete'),
+                    :actions="[
+                    Action::make('view'),
+                    Action::make('edit'),
+                    Action::make('delete'),
                 ]"
-                label="More actions"
-                icon="heroicon-m-ellipsis-vertical"
-                size="sm"
-                color="primary"
-                button
+                    label="More actions"
+                    icon="heroicon-m-ellipsis-vertical"
+                    size="sm"
+                    color="primary"
+                    button
             />
         </div>
 
         <div id="actionGroupPlacement" class="pr-40 pb-8 pt-40 flex items-center justify-center max-w-xl">
             <x-filament-actions::group
-                :actions="[
-                    \Filament\Actions\Action::make('view'),
-                    \Filament\Actions\Action::make('edit'),
-                    \Filament\Actions\Action::make('delete'),
+                    :actions="[
+                    Action::make('view'),
+                    Action::make('edit'),
+                    Action::make('delete'),
                 ]"
-                dropdown-placement="top-start"
+                    dropdown-placement="top-start"
             />
         </div>
 
         <div id="nestedActionGroups" class="pr-40 pt-8 pb-40 flex items-center justify-center max-w-xl">
             <x-filament-actions::group
-                :actions="[
-                    \Filament\Actions\ActionGroup::make([
-                        \Filament\Actions\Action::make('view'),
-                        \Filament\Actions\Action::make('edit'),
+                    :actions="[
+                    ActionGroup::make([
+                        Action::make('view'),
+                        Action::make('edit'),
                     ])->dropdown(false),
-                    \Filament\Actions\Action::make('delete'),
+                    Action::make('delete'),
                 ]"
             />
         </div>
     @endif
 
     <div id="modal">
-        <x-filament-actions::modals />
+        <x-filament-actions::modals/>
     </div>
 </div>
diff --git a/docs-assets/app/resources/views/livewire/topbar.blade.php b/docs-assets/app/resources/views/livewire/panels/navigation/empty.blade.php
similarity index 50%
rename from docs-assets/app/resources/views/livewire/topbar.blade.php
rename to docs-assets/app/resources/views/livewire/panels/navigation/empty.blade.php
index 3a6cce8d18d..b80e6e06784 100644
--- a/docs-assets/app/resources/views/livewire/topbar.blade.php
+++ b/docs-assets/app/resources/views/livewire/panels/navigation/empty.blade.php
@@ -1,3 +1,3 @@
 <div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/docs-assets/app/routes/web.php b/docs-assets/app/routes/web.php
index e2fbea67d08..3fe40ccf4be 100644
--- a/docs-assets/app/routes/web.php
+++ b/docs-assets/app/routes/web.php
@@ -7,8 +7,22 @@
 use App\Livewire\Infolists\EntriesDemo;
 use App\Livewire\Infolists\LayoutDemo as InfolistsLayoutDemo;
 use App\Livewire\NotificationsDemo;
+use App\Livewire\Panels\Navigation\ActiveIcon;
+use App\Livewire\Panels\Navigation\Badge;
+use App\Livewire\Panels\Navigation\BadgeColor;
+use App\Livewire\Panels\Navigation\BadgeTooltip;
+use App\Livewire\Panels\Navigation\ChangeIcon;
+use App\Livewire\Panels\Navigation\CustomItems;
+use App\Livewire\Panels\Navigation\DisabledNavigation;
+use App\Livewire\Panels\Navigation\Group;
+use App\Livewire\Panels\Navigation\GroupCollapsible;
+use App\Livewire\Panels\Navigation\GroupNotCollapsible;
+use App\Livewire\Panels\Navigation\SidebarCollapsibleOnDesktop;
+use App\Livewire\Panels\Navigation\SidebarFullyCollapsibleOnDesktop;
+use App\Livewire\Panels\Navigation\SortItems;
+use App\Livewire\Panels\Navigation\TopNavigation;
+use App\Livewire\Panels\Navigation\UserMenuCustomization;
 use App\Livewire\TablesDemo;
-use App\Livewire\Topbar;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -23,11 +37,36 @@
 */
 
 Route::get('/actions', ActionsDemo::class);
-Route::get('/forms/fields', FieldsDemo::class);
-Route::get('/forms/getting-started', GettingStartedDemo::class);
-Route::get('/forms/layout', FormsLayoutDemo::class);
-Route::get('/infolists/entries', EntriesDemo::class);
-Route::get('/infolists/layout', InfolistsLayoutDemo::class);
 Route::get('/notifications', NotificationsDemo::class);
 Route::get('/tables', TablesDemo::class);
-Route::get('/topbar', Topbar::class);
+
+Route::group(['prefix' => 'forms'], function () {
+    Route::get('fields', FieldsDemo::class);
+    Route::get('getting-started', GettingStartedDemo::class);
+    Route::get('layout', FormsLayoutDemo::class);
+});
+
+Route::prefix('infolists')->group(function () {
+    Route::get('entries', EntriesDemo::class);
+    Route::get('layout', InfolistsLayoutDemo::class);
+});
+
+Route::prefix('panels')->group(function () {
+    Route::prefix('navigation')->group(function () {
+        Route::get('user-menu-customization', UserMenuCustomization::class);
+        Route::get('disabled-navigation', DisabledNavigation::class);
+        Route::get('active-icon', ActiveIcon::class);
+        Route::get('change-icon', ChangeIcon::class);
+        Route::get('sort-items', SortItems::class);
+        Route::get('custom-items', CustomItems::class);
+        Route::get('top-navigation', TopNavigation::class);
+        Route::get('sidebar-collapsible-on-desktop', SidebarCollapsibleOnDesktop::class);
+        Route::get('sidebar-fully-collapsible-on-desktop', SidebarFullyCollapsibleOnDesktop::class);
+        Route::get('badge', Badge::class);
+        Route::get('badge-color', BadgeColor::class);
+        Route::get('badge-tooltip', BadgeTooltip::class);
+        Route::get('group', Group::class);
+        Route::get('group-collapsible', GroupCollapsible::class);
+        Route::get('group-not-collapsible', GroupNotCollapsible::class);
+    });
+});
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/active-icon.jpg b/docs-assets/screenshots/images/dark/panels/navigation/active-icon.jpg
new file mode 100644
index 00000000000..5ff510c5dfd
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/active-icon.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/badge-color.jpg b/docs-assets/screenshots/images/dark/panels/navigation/badge-color.jpg
new file mode 100644
index 00000000000..83a35ebdb04
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/badge-color.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/badge-tooltip.jpg b/docs-assets/screenshots/images/dark/panels/navigation/badge-tooltip.jpg
new file mode 100644
index 00000000000..c57673279cc
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/badge-tooltip.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/badge.jpg b/docs-assets/screenshots/images/dark/panels/navigation/badge.jpg
new file mode 100644
index 00000000000..6e4e8ca286c
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/badge.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/change-icon.jpg b/docs-assets/screenshots/images/dark/panels/navigation/change-icon.jpg
new file mode 100644
index 00000000000..3331f987275
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/change-icon.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/custom-items.jpg b/docs-assets/screenshots/images/dark/panels/navigation/custom-items.jpg
new file mode 100644
index 00000000000..82b3cde3c9e
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/custom-items.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/disabled-navigation.jpg b/docs-assets/screenshots/images/dark/panels/navigation/disabled-navigation.jpg
new file mode 100644
index 00000000000..3370bd4cd09
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/disabled-navigation.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/group-collapsible.jpg b/docs-assets/screenshots/images/dark/panels/navigation/group-collapsible.jpg
new file mode 100644
index 00000000000..4de3eeae618
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/group-collapsible.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/group-not-collapsible.jpg b/docs-assets/screenshots/images/dark/panels/navigation/group-not-collapsible.jpg
new file mode 100644
index 00000000000..b9740ecbc2a
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/group-not-collapsible.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/group.jpg b/docs-assets/screenshots/images/dark/panels/navigation/group.jpg
new file mode 100644
index 00000000000..6afb7d5311a
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/group.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/sidebar-collapsible-on-desktop.jpg b/docs-assets/screenshots/images/dark/panels/navigation/sidebar-collapsible-on-desktop.jpg
new file mode 100644
index 00000000000..1a6f5668ed7
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/sidebar-collapsible-on-desktop.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/sidebar-fully-collapsible-on-desktop.jpg b/docs-assets/screenshots/images/dark/panels/navigation/sidebar-fully-collapsible-on-desktop.jpg
new file mode 100644
index 00000000000..d709c527dd0
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/sidebar-fully-collapsible-on-desktop.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/sort-items.jpg b/docs-assets/screenshots/images/dark/panels/navigation/sort-items.jpg
new file mode 100644
index 00000000000..00c489d0e94
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/sort-items.jpg differ
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/top-navigation.jpg b/docs-assets/screenshots/images/dark/panels/navigation/top-navigation.jpg
new file mode 100644
index 00000000000..dd8f735f4f8
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/top-navigation.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/active-icon.jpg b/docs-assets/screenshots/images/light/panels/navigation/active-icon.jpg
new file mode 100644
index 00000000000..ebd1534e14d
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/active-icon.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/badge-color.jpg b/docs-assets/screenshots/images/light/panels/navigation/badge-color.jpg
new file mode 100644
index 00000000000..59b2e03d6b0
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/badge-color.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/badge-tooltip.jpg b/docs-assets/screenshots/images/light/panels/navigation/badge-tooltip.jpg
new file mode 100644
index 00000000000..5f0ca051023
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/badge-tooltip.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/badge.jpg b/docs-assets/screenshots/images/light/panels/navigation/badge.jpg
new file mode 100644
index 00000000000..7bbed189adb
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/badge.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/change-icon.jpg b/docs-assets/screenshots/images/light/panels/navigation/change-icon.jpg
new file mode 100644
index 00000000000..64440200d43
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/change-icon.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/custom-items.jpg b/docs-assets/screenshots/images/light/panels/navigation/custom-items.jpg
new file mode 100644
index 00000000000..c74ef3ea3e1
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/custom-items.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/disabled-navigation.jpg b/docs-assets/screenshots/images/light/panels/navigation/disabled-navigation.jpg
new file mode 100644
index 00000000000..2ffb0b32735
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/disabled-navigation.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/group-collapsible.jpg b/docs-assets/screenshots/images/light/panels/navigation/group-collapsible.jpg
new file mode 100644
index 00000000000..00de1202c53
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/group-collapsible.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/group-not-collapsible.jpg b/docs-assets/screenshots/images/light/panels/navigation/group-not-collapsible.jpg
new file mode 100644
index 00000000000..85c8b698427
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/group-not-collapsible.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/group.jpg b/docs-assets/screenshots/images/light/panels/navigation/group.jpg
new file mode 100644
index 00000000000..27030085bf2
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/group.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/sidebar-collapsible-on-desktop.jpg b/docs-assets/screenshots/images/light/panels/navigation/sidebar-collapsible-on-desktop.jpg
new file mode 100644
index 00000000000..856dc7148ac
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/sidebar-collapsible-on-desktop.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/sidebar-fully-collapsible-on-desktop.jpg b/docs-assets/screenshots/images/light/panels/navigation/sidebar-fully-collapsible-on-desktop.jpg
new file mode 100644
index 00000000000..5d74daca0d8
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/sidebar-fully-collapsible-on-desktop.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/sort-items.jpg b/docs-assets/screenshots/images/light/panels/navigation/sort-items.jpg
new file mode 100644
index 00000000000..9bb619e3554
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/sort-items.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/top-navigation.jpg b/docs-assets/screenshots/images/light/panels/navigation/top-navigation.jpg
new file mode 100644
index 00000000000..a38ec8174a0
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/top-navigation.jpg differ
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index d274225ef28..db2ba6bd63f 100644
--- a/docs-assets/screenshots/schema.js
+++ b/docs-assets/screenshots/schema.js
@@ -1920,7 +1920,7 @@ export default {
         },
     },
     'panels/navigation/user-menu': {
-        url: 'topbar',
+        url: 'panels/navigation/user-menu-customization',
         selector: 'body',
         viewport: {
             width: 1080,
@@ -1936,6 +1936,194 @@ export default {
             await new Promise((resolve) => setTimeout(resolve, 500))
         },
     },
+    'panels/navigation/disabled-navigation': {
+        url: 'panels/navigation/disabled-navigation',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 1080, height: 540, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/active-icon': {
+        url: 'panels/navigation/active-icon',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 1080, height: 540, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/change-icon': {
+        url: 'panels/navigation/change-icon',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 600, height: 440, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/custom-items': {
+        url: 'panels/navigation/custom-items',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 540, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/sidebar-collapsible-on-desktop': {
+        url: 'panels/navigation/sidebar-collapsible-on-desktop',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 540, left: 0, top: 0 })
+        },
+        before: async (page) => {
+            await page.click('.fi-sidebar-header button[title="Collapse sidebar"]')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
+    'panels/navigation/sidebar-fully-collapsible-on-desktop': {
+        url: 'panels/navigation/sidebar-fully-collapsible-on-desktop',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 300, left: 0, top: 0 })
+        },
+        before: async (page) => {
+            await page.click('.fi-sidebar-header button[title="Collapse sidebar"]')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
+    'panels/navigation/sort-items': {
+        url: 'panels/navigation/sort-items',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 500, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/top-navigation': {
+        url: 'panels/navigation/top-navigation',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 1000, height: 300, left: 0, top: 0 })
+        },
+        before: async (page) => {
+            await page.click('.fi-dropdown-trigger')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
+    'panels/navigation/badge': {
+        url: 'panels/navigation/badge',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 500, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/badge-color': {
+        url: 'panels/navigation/badge-color',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 500, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/badge-tooltip': {
+        url: 'panels/navigation/badge-tooltip',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 750, height: 500, left: 0, top: 0 })
+        },
+        before: async (page) => {
+            await page.hover('.fi-badge')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
+    'panels/navigation/group': {
+        url: 'panels/navigation/group',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 550, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/group-collapsible': {
+        url: 'panels/navigation/group-collapsible',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 550, left: 0, top: 0 })
+        },
+    },
+    'panels/navigation/group-not-collapsible': {
+        url: 'panels/navigation/group-not-collapsible',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 650, height: 550, left: 0, top: 0 })
+        },
+    },
     'tables/example': {
         url: 'tables?table=example',
         selector: 'body',
diff --git a/docs-assets/screenshots/script.js b/docs-assets/screenshots/script.js
index 6def6b8870b..9bc9f58164b 100644
--- a/docs-assets/screenshots/script.js
+++ b/docs-assets/screenshots/script.js
@@ -50,6 +50,15 @@ const processScreenshot = async (file, options, theme) => {
             },
         ])
 
+        await new Promise((resolve) => setTimeout(resolve, 500))
+    } else {
+        await page.emulateMediaFeatures([
+            {
+                name: 'prefers-color-scheme',
+                value: 'light'
+            }
+        ])
+
         await new Promise((resolve) => setTimeout(resolve, 500))
     }
 
diff --git a/packages/panels/docs/06-navigation.md b/packages/panels/docs/06-navigation.md
index 14a7c9b8880..de9dcc70918 100644
--- a/packages/panels/docs/06-navigation.md
+++ b/packages/panels/docs/06-navigation.md
@@ -34,6 +34,8 @@ To customize a navigation item's [icon](https://blade-ui-kit.com/blade-icons?set
 protected static ?string $navigationIcon = 'heroicon-o-document-text';
 ```
 
+<AutoScreenshot name="panels/navigation/change-icon" alt="Changed navigation item icon" version="3.x" />
+
 If you set `$navigationIcon = null` on all items within the same navigation group, those items will be joined with a vertical bar below the group label.
 
 ### Switching navigation item icon when it is active
@@ -44,6 +46,8 @@ You may assign a navigation [icon](https://blade-ui-kit.com/blade-icons?set=1#se
 protected static ?string $activeNavigationIcon = 'heroicon-o-document-text';
 ```
 
+<AutoScreenshot name="panels/navigation/active-icon" alt="Different navigation item icon when active" version="3.x" />
+
 ## Sorting navigation items
 
 By default, navigation items are sorted alphabetically. You may customize this using the `$navigationSort` property:
@@ -54,6 +58,8 @@ protected static ?int $navigationSort = 3;
 
 Now, navigation items with a lower sort value will appear before those with a higher sort value - the order is ascending.
 
+<AutoScreenshot name="panels/navigation/sort-items" alt="Sort navigation items" version="3.x" />
+
 ## Adding a badge to a navigation item
 
 To add a badge next to the navigation item, you can use the `getNavigationBadge()` method and return the content of the badge:
@@ -65,6 +71,8 @@ public static function getNavigationBadge(): ?string
 }
 ```
 
+<AutoScreenshot name="panels/navigation/badge" alt="Navigation item with badge" version="3.x" />
+
 If a badge value is returned by `getNavigationBadge()`, it will display using the primary color by default. To style the badge contextually, return either `danger`, `gray`, `info`, `primary`, `success` or `warning` from the `getNavigationBadgeColor()` method:
 
 ```php
@@ -74,6 +82,8 @@ public static function getNavigationBadgeColor(): ?string
 }
 ```
 
+<AutoScreenshot name="panels/navigation/badge-color" alt="Navigation item with badge color" version="3.x" />
+
 A custom tooltip for the navigation badge can be set in `$navigationBadgeTooltip`:
 
 ```php
@@ -89,6 +99,8 @@ public static function getNavigationBadgeTooltip(): ?string
 }
 ```
 
+<AutoScreenshot name="panels/navigation/badge-tooltip" alt="Navigation item with badge tooltip" version="3.x" />
+
 ## Grouping navigation items
 
 You may group navigation items by specifying a `$navigationGroup` property on a [resource](resources/getting-started) and [custom page](pages):
@@ -97,6 +109,8 @@ You may group navigation items by specifying a `$navigationGroup` property on a
 protected static ?string $navigationGroup = 'Settings';
 ```
 
+<AutoScreenshot name="panels/navigation/group" alt="Grouped navigation items" version="3.x" />
+
 All items in the same navigation group will be displayed together under the same group label, "Settings" in this case. Ungrouped items will remain at the start of the navigation.
 
 ### Grouping navigation items under other items
@@ -166,7 +180,11 @@ $panel
 
 #### Making navigation groups not collapsible
 
-By default, navigation groups are collapsible. You may disable this behavior by calling `collapsible(false)` on the `NavigationGroup` object:
+By default, navigation groups are collapsible.
+
+<AutoScreenshot name="panels/navigation/group-collapsible" alt="Collapsible navigation groups" version="3.x" />
+
+You may disable this behavior by calling `collapsible(false)` on the `NavigationGroup` object:
 
 ```php
 use Filament\Navigation\NavigationGroup;
@@ -177,6 +195,8 @@ NavigationGroup::make()
     ->collapsible(false);
 ```
 
+<AutoScreenshot name="panels/navigation/group-not-collapsible" alt="Not collapsible navigation groups" version="3.x" />
+
 Or, you can do it globally for all groups in the [configuration](configuration):
 
 ```php
@@ -217,6 +237,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/sidebar-collapsible-on-desktop" alt="Collapsible sidebar on desktop" version="3.x" />
+
 By default, when you collapse the sidebar on desktop, the navigation icons still show. You can fully collapse the sidebar using the `sidebarFullyCollapsibleOnDesktop()` method:
 
 ```php
@@ -230,6 +252,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/sidebar-fully-collapsible-on-desktop" alt="Fully collapsible sidebar on desktop" version="3.x" />
+
 ### Navigation groups in a collapsible sidebar on desktop
 
 > This section only applies to `sidebarCollapsibleOnDesktop()`, not `sidebarFullyCollapsibleOnDesktop()`, since the fully collapsible UI just hides the entire sidebar instead of changing its design.
@@ -315,6 +339,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/top-navigation" alt="Top navigation" version="3.x" />
+
 ## Customizing the width of the sidebar
 
 You can customize the width of the sidebar by passing it to the `sidebarWidth()` method in the [configuration](configuration):
@@ -377,6 +403,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/custom-items" alt="Custom navigation items" version="3.x" />
+
 ### Registering custom navigation groups
 
 If you want to register groups, you can call the `groups()` method:
@@ -421,6 +449,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/disabled-navigation" alt="Disabled navigation sidebar" version="3.x" />
+
 ### Disabling the topbar
 
 You may disable topbar entirely by passing `false` to the `topbar()` method: