maryUI

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.

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