1. First
  2. Second
  3. Third

Menu

Create navigation menus with support for nested items, icons, and various styling options. Menus can be organized as groups with hierarchical structures.

Menu Array Structure

Before using menu components, you need to understand how to structure your navigation data. Menus are built from PHP arrays that define the hierarchy, links, icons, and states of your navigation items.

Each menu item is defined as a key-value pair where the key is the display name and the value is an array of properties. For simple menu items, you only need an icon and url. For more complex navigation, you can add nested items to create dropdown or collapsible sections.

The selected property marks which menu item is currently active, helping users understand their current location in your application. This is typically set dynamically based on the current route or page.

@php
    $menuArray = [
        'Home' => [
            'icon' => '<i class="fa-solid fa-home"></i>',
            'url'  => '#',
        ],
        'Components' => [
            'icon' => '<i class="fa-solid fa-square-binary"></i>',
            'selected' => true,
            'items' => [
                'Alert' => '#',
                'Card' => '#',
                'Chat' => '#',
                'Code' => '#',
                'Menu' => '#',
            ],
        ],
        'Admin' => [
            'icon' => '<i class="fa-solid fa-lock"></i>',
            'selected' => false,
            'items' => [
                'Login' => '#',
                'Logout' => '#',
            ]
        ],
        'Settings' => [
            'icon' => '<i class="fa-solid fa-cog"></i>',
            'url'  => '#',
        ],
        'Help' => [
            'icon' => '<i class="fa-solid fa-question-circle"></i>',
            'url'  => '#',
        ],
    ];
@endphp

The menu component supports 9 different variants, each with its own color scheme and styling:

<x-andach-menu-group :items="$menuArray" />
<x-andach-menu-group :items="$menuArray" variant="dark" />
<x-andach-menu-group :items="$menuArray" variant="light" />
<x-andach-menu-group :items="$menuArray" variant="brand" />
<x-andach-menu-group :items="$menuArray" variant="primary" />
<x-andach-menu-group :items="$menuArray" variant="secondary" />
<x-andach-menu-group :items="$menuArray" variant="success" />
<x-andach-menu-group :items="$menuArray" variant="warning" />
<x-andach-menu-group :items="$menuArray" variant="danger" />

Customisation

Attribute Name Type Default Value Description
url string '' The URL or route for the menu item link.
title string '' The display title for the menu item.
selected bool false Whether the menu item is currently selected/active.
items array [] Array of sub-menu items for nested navigation.
icon string '' HTML string for the menu item icon (FontAwesome, Heroicons, etc.).
background string null Controls the background styling of the menu.
border string null Adds border styling to the menu for enhanced visual separation.
divide string null Adds divider lines between menu items.
hollow string null Creates a hollow/outline style menu with transparent background.
ring string null Adds a ring/outline effect around the menu for additional emphasis.
rounded string null Controls the border radius of the menu corners.
shadow string null Adds drop shadow effects to give the menu depth and elevation.
size string null Controls the overall size and spacing. Options: 'xs', 'sm', 'base', 'lg', 'xl'.
variant string null Color scheme variant. Options: 'default', 'dark', 'light', 'brand', 'primary', 'secondary', 'success', 'warning', 'danger'.

Size Variations

Control the spacing and size of menu items:

<x-andach-menu-group :items="$menuArray" size="sm" variant="secondary" />
<x-andach-menu-group :items="$menuArray" size="lg" variant="brand" />

Styling Attributes

Enhance menus with various styling options:

<x-andach-menu-group :items="$menuArray" variant="primary" :divide="true" />
<x-andach-menu-group :items="$menuArray" variant="success" :shadow="true" :ring="true" />
<x-andach-menu-group :items="$menuArray" variant="warning" :hollow="true" />

Simple Menu Structure

For simpler navigation without nested items, you can create a flat menu structure. This is perfect for user account menus, quick actions, or simple navigation bars:

@php
    $simpleMenu = [
        'Dashboard' => [
            'icon' => '<i class="fa-solid fa-chart-line"></i>',
            'url'  => '#',
            'selected' => true,
        ],
        'Profile' => [
            'icon' => '<i class="fa-solid fa-user"></i>',
            'url'  => '#',
        ],
        'Messages' => [
            'icon' => '<i class="fa-solid fa-envelope"></i>',
            'url'  => '#',
        ],
        'Logout' => [
            'icon' => '<i class="fa-solid fa-sign-out-alt"></i>',
            'url'  => '#',
        ],
    ];
@endphp

<x-andach-menu-group :items="$simpleMenu" variant="dark" />