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-blue-50" 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 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>