TALL kit

The dropdown menu component facilitates the selection of menu items through a visually appealing dropdown interface, enhancing user experience and navigation within your application.

With the support of the Floating-UI library, the dropdown menu component can utilize the flip and shift functionalities, allowing it to intelligently reposition itself on the screen based on available space and the user's interactions.

<x-menu.dropdown x-data>
    <x-button x-menu:trigger
              variant="outline"
              color="neutral"
    >
        <x-icon name="heroicon-o-ellipsis-vertical" class="h-5 w-5 -mx-1"/>
    </x-button>
    <x-slot:menu>
        <div class="px-3">
            <p class="text-sm font-semibold leading-6 text-gray-900">John Doe</p>
            <p class="text-xs leading-5 text-gray-500">john@example.com</p>
        </div>
        <x-separator/>
        <x-menu.item>
            <x-icon name="heroicon-o-user" class="h-5 w-5 mr-2"/>
            Account
        </x-menu.item>
        <x-menu.item>
            <x-icon name="heroicon-o-cog-6-tooth" class="h-5 w-5 mr-2"/>
            Settings
        </x-menu.item>
        <x-menu.submenu>
            <x-icon name="heroicon-o-user-group" class="h-5 w-5 mr-2"/>
            Team
            <x-slot:menu>
                <x-menu.item>
                    <x-icon name="heroicon-o-envelope" class="h-5 w-5 mr-2"/>
                    Messages
                </x-menu.item>
                <x-menu.item disabled>
                    <x-icon name="heroicon-o-adjustments-vertical" class="h-5 w-5 mr-2"/>
                    Permissions
                </x-menu.item>
                <x-separator/>
                <x-menu.item>
                    <x-icon name="heroicon-o-user-plus" class="h-5 w-5 mr-2"/>
                    Invite
                </x-menu.item>
            </x-slot:menu>
        </x-menu.submenu>
        <x-menu.item disabled>
            <x-icon name="heroicon-o-puzzle-piece" class="h-5 w-5 mr-2"/>
            Plugins
        </x-menu.item>
        <x-separator/>
        <x-menu.item>
            <x-icon name="heroicon-o-arrow-left-on-rectangle" class="h-5 w-5 mr-2"/>
            Log out
        </x-menu.item>
    </x-slot:menu>
</x-menu.dropdown>

Installation

Make sure to include the required TALL kit plugin to enable the dropdown menu functionality.

import {
    menu,
} from "@tall-kit/plugins"

Alpine.plugin(menu)

Usage

Menuitem as link

<x-menu.dropdown x-data>
    <x-button x-menu:trigger>
        Options
    </x-button>
    <x-slot:menu>
        <x-menu.item target="_blank" href="https://tall-kit.dev">
            Go to link
        </x-menu.item>
    </x-slot:menu>
</x-menu.dropdown>

Menuitem with Alpine.js click event

<x-menu.dropdown x-data>
    <x-button x-menu:trigger>
        Options
    </x-button>
    <x-slot:menu>
        <x-menu.item x-on:click="$dropdownMenu.hideAndFocus()">
            Close menu
        </x-menu.item>
    </x-slot:menu>
</x-menu.dropdown>

Menuitem with Livewire click event

<x-menu.dropdown wire:key="dropdown" x-data="{
    increment() {
        return $wire.increment();
    },
    reset() {
        return $wire.$set('count', 0);
    }
}">
    <x-button x-menu:trigger>
        Count: {{$count}}
    </x-button>
    <x-slot:menu>
        <x-menu.item x-on:click="increment()">
            Increment
        </x-menu.item>
        <x-menu.item x-on:click="reset().then(() => $dropdownMenu.hideAndFocus())">
            Reset
        </x-menu.item>
    </x-slot:menu>
</x-menu.dropdown>