Added sample generated image

docs-assets/app/app/Livewire/Topbar.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Livewire;
+
+use Filament\Navigation\MenuItem;
+use Filament\Pages\Page;
+
+class Topbar extends Page
+{
+    protected static string $view = 'livewire.topbar';
+
+    public function mount()
+    {
+        filament()
+            ->getCurrentPanel()
+            ->userMenuItems([
+                MenuItem::make()
+                    ->label('Settings')
+                    ->url(fn(): string => '#')
+                    ->icon('heroicon-o-cog-6-tooth'),
+            ]);
+    }
+}

docs-assets/app/resources/views/livewire/topbar.blade.php

@@ -0,0 +1,3 @@
+<div>
+
+</div>

docs-assets/app/routes/web.php

@@ -8,6 +8,7 @@ use App\Livewire\Infolists\EntriesDemo;
 use App\Livewire\Infolists\LayoutDemo as InfolistsLayoutDemo;
 use App\Livewire\NotificationsDemo;
 use App\Livewire\TablesDemo;
+use App\Livewire\Topbar;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -29,3 +30,4 @@ Route::get('/infolists/entries', EntriesDemo::class);
 Route::get('/infolists/layout', InfolistsLayoutDemo::class);
 Route::get('/notifications', NotificationsDemo::class);
 Route::get('/tables', TablesDemo::class);
+Route::get('/top-bar', Topbar::class);

docs-assets/screenshots/schema.js

@@ -2954,4 +2954,18 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'panels/navigation/customizing-user-menu': {
+        url: 'top-bar',
+        selector: 'body > div.fi-layout.flex.min-h-screen.w-full.flex-row-reverse.overflow-x-clip > div.fi-main-ctn.w-screen.flex-1.flex-col.opacity-0 > div > nav > div > div > div.fi-dropdown-panel.absolute.z-10.w-screen.divide-y.divide-gray-100.rounded-lg.bg-white.shadow-lg.ring-1.ring-gray-950\\/5.transition.dark\\:divide-white\\/5.dark\\:bg-gray-900.dark\\:ring-white\\/10.\\!max-w-\\[14rem\\]',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.click('body > div.fi-layout.flex.min-h-screen.w-full.flex-row-reverse.overflow-x-clip > div.fi-main-ctn.w-screen.flex-1.flex-col.opacity-0 > div > nav > div > div > div.fi-dropdown-trigger.flex.cursor-pointer')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
 }

packages/panels/docs/06-navigation.md

@@ -460,6 +460,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/customizing-user-menu" alt="Customized User Menu" version="3.x" />
+
 ### Customizing the profile link
 
 To customize the user profile link at the start of the user menu, register a new item with the `profile` array key: