Livewire Components

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

  • My Account 
<x-dropdown-menu>
    <x-dropdown-menu.trigger variant="outline">
        Open
    </x-dropdown-menu.trigger>
    <x-dropdown-menu.content class="w-56">
        <x-dropdown-menu.label>My Account</x-dropdown-menu.label>
        <x-dropdown-menu.separator />
        <x-dropdown-menu.group>
            <x-dropdown-menu.item>
                Profile
                <x-dropdown-menu.shortcut>⇧⌘P</x-dropdown-menu.shortcut>
            </x-dropdown-menu.item>
            <x-dropdown-menu.item>
                Prada
                <x-dropdown-menu.shortcut>⇧⌘P</x-dropdown-menu.shortcut>
            </x-dropdown-menu.item>
            <x-dropdown-menu.item>
                Pokemon
                <x-dropdown-menu.shortcut>⇧⌘P</x-dropdown-menu.shortcut>
            </x-dropdown-menu.item>
            <x-dropdown-menu.sub>
                <x-dropdown-menu.sub.trigger>Invite users</x-dropdown-menu.sub.trigger>
                <x-dropdown-menu.sub.content>
                    <x-dropdown-menu.item>Email</x-dropdown-menu.item>
                    <x-dropdown-menu.item>Message</x-dropdown-menu.item>
                    <x-dropdown-menu.separator />
                    <x-dropdown-menu.item>More...</x-dropdown-menu.item>
                    <x-dropdown-menu.sub>
                        <x-dropdown-menu.sub.trigger>Invite users</x-dropdown-menu.sub.trigger>
                        <x-dropdown-menu.sub.content>
                            <x-dropdown-menu.item>Email</x-dropdown-menu.item>
                            <x-dropdown-menu.item>Message</x-dropdown-menu.item>
                            <x-dropdown-menu.separator />
                            <x-dropdown-menu.item>More...</x-dropdown-menu.item>
                        </x-dropdown-menu.sub.content>
                    </x-dropdown-menu.sub>
                </x-dropdown-menu.sub.content>
            </x-dropdown-menu.sub>
        </x-dropdown-menu.group>
        <x-dropdown-menu.separator />
        <x-dropdown-menu.item>
            Log out
            <x-dropdown-menu.shortcut>⇧⌘Q</x-dropdown-menu.shortcut>
        </x-dropdown-menu.item>
    </x-dropdown-menu.content>
</x-dropdown-menu>

Installation

php artisan vendor:publish --tag=dropdown-menu --force

Usage

<x-dropdown-menu>
    <x-dropdown-menu.trigger>Open</x-dropdown-menu.trigger>
    <x-dropdown-menu.content>
        <x-dropdown-menu.label>My Account</x-dropdown-menu.label>
        <x-dropdown-menu.separator />
        <x-dropdown-menu.item>Profile</x-dropdown-menu.item>
        <x-dropdown-menu.item>Billing</x-dropdown-menu.item>
        <x-dropdown-menu.item>Team</x-dropdown-menu.item>
        <x-dropdown-menu.item>Subscription</x-dropdown-menu.item>
    </x-dropdown-menu.content>
</x-dropdown-menu>

Examples

Checkboxes

  • Appearance
  • Status Bar
  • Activity Bar
  • Panel 
<x-dropdown-menu>
    <x-dropdown-menu.trigger variant="outline">
        Open
    </x-dropdown-menu.trigger>
    <x-dropdown-menu.content class="w-56">
        <x-dropdown-menu.label>Appearance</x-dropdown-menu.label>
        <x-dropdown-menu.separator />
        <x-dropdown-menu.checkboxitem value="statusbar">
            Status Bar
        </x-dropdown-menu.checkboxitem>
        <x-dropdown-menu.checkboxitem
            disabled
            value="activitybar"
        >
            Activity Bar
        </x-dropdown-menu.checkboxitem>
        <x-dropdown-menu.checkboxitem value="panel">
            Panel
        </x-dropdown-menu.checkboxitem>
    </x-dropdown-menu.content>
</x-dropdown-menu>

Radio Group

  • Panel Position
    • Top
    • Bottom
    • Right 
<x-dropdown-menu>
    <x-dropdown-menu.trigger variant="outline">
        Open
    </x-dropdown-menu.trigger>
    <x-dropdown-menu.content class="w-56">
        <x-dropdown-menu.label>Panel Position</x-dropdown-menu.label>
        <x-dropdown-menu.separator />
        <x-dropdown-menu.radioitemgroup default-value="bottom">
            <x-dropdown-menu.radioitem value="top">
                Top
            </x-dropdown-menu.radioitem>
            <x-dropdown-menu.radioitem value="bottom">
                Bottom
            </x-dropdown-menu.radioitem>
            <x-dropdown-menu.radioitem value="right">
                Right
            </x-dropdown-menu.radioitem>
        </x-dropdown-menu.radioitemgroup>
    </x-dropdown-menu.content>
</x-dropdown-menu>