<x-menu class="border border-base-content/10 !w-64">
    <x-menu-item title="Home" icon="o-home" />
 
    <x-menu-item title="Messages" icon="o-envelope" badge="1" badge-classes="badge-error badge-soft" />
 
    <x-menu-item title="My settings" icon="o-bolt" badge="new" badge-classes="float-right" />
</x-menu>

Links

<x-menu class="border border-base-content/10">
    {{-- Default --}}
    <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-base-content/10 !w-64">
    <x-menu-item title="Hello" />
    <x-menu-item title="There" />
 
    <x-menu-separator />
 
    <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>
 
    <x-menu-separator />
 
    <x-menu-item title="Wifi" icon="o-wifi" />
</x-menu>

You can manually force the submenu keep open.

Home
- Users
- Folders
Settings
- Wifi
- Archives

<x-menu class="border border-base-content/10 !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-base-content/10">
    <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.

<x-menu class="border border-base-content/10">
    <x-menu-item title="Hey" />
 
    {{-- Notice `active` --}}
    <x-menu-item title="Hi" active />
 
    <x-menu-item title="You" />
</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-base-content/10">
    {{-- It is active because you are right now browsing this url --}}
    <x-menu-item title="Menu component" 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>

Custom style

You can define any style for the current active menu with active-bg-color. Also, for each menu item you can freely place any CSS.

{{-- We use this style on maryUI docs --}}
<x-menu activate-by-route active-bg-color="font-black" class="border border-base-content/10 !w-64">
    <x-menu-item title="Hello" />
    <x-menu-item title="There" />
 
    <x-menu-separator />
 
    <x-menu-sub title="Docs" icon="o-book-open">
        <x-menu-item title="Table" />
        <x-menu-item title="Menu" link="/docs/components/menu" />
    </x-menu-sub>
</x-menu>

Slots

<x-menu class="border border-base-content/10 !w-64">
    <x-menu-item>
        My <b>settings</b>
    </x-menu-item>
</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.

Example of solution.

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

Made with by Robson Tenório and contributors.