diff --git a/docs-assets/app/app/Livewire/Topbar.php b/docs-assets/app/app/Livewire/Topbar.php
new file mode 100644
index 0000000000..148699da3e
--- /dev/null
+++ b/docs-assets/app/app/Livewire/Topbar.php
@@ -0,0 +1,23 @@
+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 @@
+
+
+
\ No newline at end of file
diff --git a/docs-assets/app/routes/web.php b/docs-assets/app/routes/web.php
index 68bd0deace..cdf11d01b2 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('/top-bar', Topbar::class);
diff --git a/docs-assets/screenshots/images/dark/panels/navigation/customizing-user-menu.jpg b/docs-assets/screenshots/images/dark/panels/navigation/customizing-user-menu.jpg
new file mode 100644
index 0000000000..9bc33c763c
Binary files /dev/null and b/docs-assets/screenshots/images/dark/panels/navigation/customizing-user-menu.jpg differ
diff --git a/docs-assets/screenshots/images/light/panels/navigation/customizing-user-menu.jpg b/docs-assets/screenshots/images/light/panels/navigation/customizing-user-menu.jpg
new file mode 100644
index 0000000000..f8238f02cb
Binary files /dev/null and b/docs-assets/screenshots/images/light/panels/navigation/customizing-user-menu.jpg differ
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index a9795d2808..c67621e210 100644
--- a/docs-assets/screenshots/schema.js
+++ b/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))
+ },
+ },
}
diff --git a/packages/panels/docs/06-navigation.md b/packages/panels/docs/06-navigation.md
index a989a40de4..c36391610c 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
}
```
+
+
### 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: