Menu
This component plays nice with Dropdown and Layout`s sidebar slot.
Basic
<x-menu class="border border-dashed"> <x-menu-item title="Home" icon="o-envelope" /> <x-menu-item title="Messages" icon="o-paper-airplane" badge="78+" badge-classes="float-right" /> <x-menu-item title="Hello" icon="o-sparkles" badge="new" badge-classes="!badge-warning" /> <x-menu-item title="Internal link" icon="o-arrow-down" link="/docs/components/alert" /> {{-- Notice `external` --}} <x-menu-item title="External link" icon="o-arrow-uturn-right" link="https://google.com" external /> {{-- Notice `no-wire-navigate` --}} <x-menu-item title="Internal without wire:navigate" icon="o-power" link="/docs/components/menu" no-wire-navigate /></x-menu>
Separator and Sub-menus
<x-menu class="border border-dashed w-64"> <x-menu-item title="Hello" /> <x-menu-item title="There" /> {{-- Simple separator --}} <x-menu-separator /> {{-- Submenu --}} <x-menu-sub title="Settings" icon="o-cog-6-tooth"> <x-menu-item title="Wifi" icon="o-wifi" /> <x-menu-item title="Archives" icon="o-archive-box" /> </x-menu-sub> {{-- Separator with title and icon --}} <x-menu-separator title="Magic" icon="o-sparkles" /> <x-menu-item title="Wifi" icon="o-wifi" /></x-menu>
You can manually force the submenu keep open.
<x-menu class="border border-dashed w-64"> <x-menu-sub title="Home" icon="o-home"> <x-menu-item title="Users" icon="o-user" /> <x-menu-item title="Folders" icon="o-folder" /> </x-menu-sub> {{-- Force with `open` --}} <x-menu-sub title="Settings" icon="o-cog-6-tooth" open> <x-menu-item title="Wifi" icon="o-wifi" /> <x-menu-item title="Archives" icon="o-archive-box" /> </x-menu-sub></x-menu>
Enabled state
You can control the visibility of menus with the enabled
attribute.
<x-menu class="border border-dashed w-64"> <x-menu-item title="Users" icon="o-user" /> {{-- Notice `enabled` --}} <x-menu-item title="Folders" icon="o-folder" :enabled="false" /> {{-- Notice `enabled` --}} <x-menu-sub title="Settings" icon="o-cog-6-tooth" :enabled="false"> <x-menu-item title="Wifi" icon="o-wifi" /> <x-menu-item title="Archives" icon="o-archive-box" /> </x-menu-sub></x-menu>
Manual active state
You can manually define the active menu item by placing active
attribute and choose a custom active color with active-bg-color
attribute.
<x-menu active-bg-color="bg-purple-500/10" class="border border-dashed"> {{-- Notice `active` --}} <x-menu-item title="Hi" active /> <x-menu-item title="Some style" class="text-purple-500 font-bold" /></x-menu>
Automatic active state
You can automatically activate a menu item when current route matches the base link
and its nested route variations by using the activate-by-route
attribute.
For example, link="/users"
will activate same menu item when you deep navigate for these routes:
- /users
- /users/23
- /users/23/edit
- /users/23/create
- /users/?q=mary
- /users/[anything]
{{-- Notice `activate-by-route` --}}<x-menu activate-by-route class="border border-dashed"> {{-- It is active because you are right now browsing this url --}} <x-menu-item title="Home" link="/docs/components/menu" /> <x-menu-item title="Party" /></x-menu>
If you use Laravel named routes, combine with the route
param that matches the named route.
<x-menu activate-by-route> <x-menu-sub title="Attendance"> <x-menu-item title="Start" link="{{ route('attendance.index') }}" route="attendance.index" /> <x-menu-item title="View" link="{{ route('attendance.list') }}" route="attendance.list" /> </x-menu-sub>
If for some reason you need to use "conflicting" routes on main menu. Use the attribute exact
do handle it properly.
Although it is not recommended to have this kind of route on the main menu, you have this option.
<x-menu activate-by-route> {{-- Notice `exact` --}} <x-menu-item title="Something 10" link="/something/10" exact /> <x-menu-item title="Something 101" link="/something/101" exact /></x-menu>
Cloud providers
Some cloud providers put your app behind a proxy and force all routes to https.
Here is a solution to trust proxies and make activate-by-route
attribute work as expected.
// bootstrap/app.php return Application::configure(basePath: dirname(__DIR__)) ... ->withMiddleware(function (Middleware $middleware) { $middleware->trustProxies(at: '*'); }) ...