Menu System
A set of menu components allows the easy creation of left-side navigation menus. The navigation menu on the left of this site is built with these components.
Components
<x-euikit::menu>
| Wrapper around the menu |
<x-euikit::menu.submenu>
| Wrapper around a submenu |
<x-euikit::menu.item>
| Menu item |
menu component
The <x-euikit::menu> component wraps around the whole
menu. It sets up spacing, and needs no attributes, though it will honor any attributes
given.
menu.submenu component
To set up submenus, use the <x-euikit::menu.submenu> component. It takes a singular attribute, title, that will be rendered above the menu items. The
name attribute is optional, and will default to "general" if not specified.
Any other attributes passed to the submenu component will be added directly to the
title's <div>.
If you want to override colors on the submenu, prefix your class with TailwindCSS's important ("!") operator. Example:
<x-euikit::menu.submenu class="!text-red-500">menu</x-euikit::menu.submenu>.
menu.item component
Menu entries are created using the <x-euikit::menu.item> component. It takes the following attributes:
route
| Yes | (none) | Defines the route to redirect to that if this menu item is clicked. |
lefticon
| no | (none) |
Icon to place on the left side of the menu text. The icon will be rendered with
the @svg() Blade directive, so any icon
pack in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
badge
| no | (none) | Badge to show to the right of the menu text. EUIKit will use the Tag component internally to render the badge. |
badge-type
| no | "info" |
Type of badge to render. Ignored if there is no badge attribute defined. Can take any of the Colors and Types common to other EUIKit
components. Defaults to "info" if not specified.
|
Menu system example
<x-e::menu>
<x-e::menu.submenu title="items">
<x-e::menu.item route="#">Item 1</x-e::menu.item>
<x-e::menu.item route="#" lefticon="heroicon-o-cube-transparent">Item 2</x-e::menu.item>
<x-e::menu.item route="#" badge="!" badge-type="warning">Warning Item</x-e::menu.item>
</x-e::menu.submenu>
</x-e::menu>