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+" />
 
<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>

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>

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.

Laravel 11 solution.
// bootstrap/app.php
 
return Application::configure(basePath: dirname(__DIR__))
...
->withMiddleware(function (Middleware $middleware) {
$middleware->trustProxies(at: '*');
})
...

maryUI
Sponsor