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

Sections and Sub-menus 

<x-menu class="border border-dashed">
    <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>

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>

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 for:

  • /users
  • /users/23
  • /users/23/edit
  • /users/23/create
  • /users/?q=mary
  • ...

{{-- 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