diff --git a/docs-assets/app/app/Livewire/Topbar.php b/docs-assets/app/app/Livewire/Topbar.php
new file mode 100644
index 0000000000..f0961014ce
--- /dev/null
+++ b/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'),
+            ]);
+    }
+}
diff --git a/docs-assets/app/resources/views/livewire/topbar.blade.php b/docs-assets/app/resources/views/livewire/topbar.blade.php
new file mode 100644
index 0000000000..3a6cce8d18
--- /dev/null
+++ b/docs-assets/app/resources/views/livewire/topbar.blade.php
@@ -0,0 +1,3 @@
+<div>
+
+</div>
\ No newline at end of file
diff --git a/docs-assets/app/routes/web.php b/docs-assets/app/routes/web.php
index 68bd0deace..e2fbea67d0 100644
--- a/docs-assets/app/routes/web.php
+++ b/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('/topbar', Topbar::class);
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/user-menu.jpg b/docs-assets/screenshots/images/dark/panels/navigation/user-menu.jpg
new file mode 100644
index 0000000000..f2e43738b7
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/user-menu.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/user-menu.jpg b/docs-assets/screenshots/images/light/panels/navigation/user-menu.jpg
new file mode 100644
index 0000000000..7f0f37fb04
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/user-menu.jpg differ
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index a9795d2808..d274225ef2 100644
--- a/docs-assets/screenshots/schema.js
+++ b/docs-assets/screenshots/schema.js
@@ -1919,6 +1919,23 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'panels/navigation/user-menu': {
+        url: 'topbar',
+        selector: 'body',
+        viewport: {
+            width: 1080,
+            height: 640,
+            deviceScaleFactor: 0,
+        },
+        crop: (image) => {
+            return image.extract({ width: 1080, height: 540, left: 1080, top: 0 })
+        },
+        before: async (page) => {
+            await page.click('.fi-user-menu button')
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
     'tables/example': {
         url: 'tables?table=example',
         selector: 'body',
diff --git a/packages/panels/docs/06-navigation.md b/packages/panels/docs/06-navigation.md
index a989a40de4..b631784f38 100644
--- a/packages/panels/docs/06-navigation.md
+++ b/packages/panels/docs/06-navigation.md
@@ -460,6 +460,8 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+<AutoScreenshot name="panels/navigation/user-menu" alt="User menu with custom menu item" 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: