UI Components

{{--  Menu 1 --}}
<x-menu w-48>
    <x-menu-item label="Edit" />
    <x-menu-item label="Duplicate" />
    <x-menu-item label="Archive" />
    <x-menu-item label="Share" />
    <x-menu-item label="Add to Favorites" />
    <x-menu-item label="Delete" />
</x-menu>
 
{{--  Menu 2 --}}
<x-menu>
    <x-menu-item label="Edit" icon="pencil-square" />
    <x-menu-item label="Duplicate" icon="document-duplicate" />
    <x-menu-item label="Archive" icon="archive-box" />
 
    <x-separator />
    <x-menu-item label="Share" icon="user-plus" />
    <x-menu-item label="Add to Favorites" icon="heart" />
 
    <x-separator />
    <x-menu-item label="Delete" icon="trash" />
</x-menu>
 
{{--  Menu 3 --}}
<x-menu title="Menu">
    <x-menu-item label="Edit" icon="pencil-square" />
    <x-menu-item label="Duplicate" icon="document-duplicate" />
 
    <x-separator />
    <x-menu-item label="Archive" icon="archive-box" badge="25" badge-end />
    <x-menu-item label="Move" icon="arrow-right-circle" />
 
    <x-separator title="Actions" />
    <x-menu-item label="Share" icon="user-plus" badge="New"  />
    <x-menu-item label="Add to Favorites" icon="heart" />
 
    <x-separator />
    <x-menu-item label="Delete" icon="trash" />
</x-menu>

<x-menu>
    <x-menu-item label="View" icon="eye" link="#" />
    <x-menu-item label="Edit" icon="pencil-square" link="#" external />
    <x-menu-item label="Delete" icon="trash" link="#" no-wire-navigate />
</x-menu>

# Customization

Edit

Archive
25

<x-menu class="rounded shadow-md ring-primary/20 dark:ring-primary/20 shadow-primary/20">
    <x-menu-item label="Edit" icon="pencil-square" class="hover:bg-primary/10 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-primary" class:icon="group-hover:text-primary dark:group-hover:text-primary" />
 
    <x-separator class="bg-primary/20 dark:bg-primary/20" />
 
    <x-menu-item label="Archive" icon="archive-box" badge="25" badge-end class="hover:bg-primary/10 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-primary" class:icon="group-hover:text-primary dark:group-hover:text-primary" class:badge="bg-primary dark:bg-primary text-white dark:text-white" />
</x-menu>

Default settings

Change menu default settings according your needs config/tallcraftui.php

return [
    'menu' => [
        'width' => Width::W56->value,
        'shadow' => Shadow::Shadow->value,
        'border-radius' => BorderRadius::RoundedMd->value,
    ],
];

Menu

Cyber Week Mega Offer!

# Basic usage

# Menu with link

# Customization

Default settings