Dropdown

Dropdowns plays nice with the Menu component. Under the hood It uses the Alpine's anchor plugin to control the position.

Take a look at Select for value selection.

Basic

<x-dropdown>
    <x-menu-item title="Archive" icon="o-archive-box" />
    <x-menu-item title="Remove" icon="o-trash" />
    <x-menu-item title="Restore" icon="o-arrow-path" />
</x-dropdown>

Custom Trigger

<x-dropdown>
    <x-slot:trigger>
        <x-button icon="o-bell" class="btn-circle btn-outline" />
    </x-slot:trigger>
 
    <x-menu-item title="Archive" />
    <x-menu-item title="Move" />
</x-dropdown>

Right alignment

{{-- Use `right` if dropdown is on right side of screen --}}
<x-dropdown label="Hello" class="btn-warning" right>
    <x-menu-item title="It should align correctly on right side" />
    <x-menu-item title="Yes!" />
</x-dropdown>

Click propagation

By default, any click closes the dropdown. Just use @click.stop or wire:click.stop to prevent this behavior.

<x-dropdown label="Settings" class="btn-outline">
    {{-- By default any click closes dropdown --}}
    <x-menu-item title="Close after click" />
 
    <x-menu-separator />
 
    {{-- Use `@click.STOP` to stop event propagation --}}
    <x-menu-item title="Keep open after click" @click.stop="alert('Keep open')" />
 
    {{-- Or `wire:click.stop`  --}}
    <x-menu-item title="Call wire:click" wire:click.stop="delete" />
 
    <x-menu-separator />
 
    <x-menu-item @click.stop="">
        <x-checkbox label="Activate" />
    </x-menu-item>
 
    <x-menu-item @click.stop="">
        <x-toggle label="Sleep mode" right />
    </x-menu-item>
</x-dropdown>

Spinner

<x-dropdown label="Settings" class="btn-outline">
    <x-menu-item title="Spinner" wire:click.stop="delete2" spinner="delete2" />
    <x-menu-item title="Spinner" wire:click.stop="delete3" spinner="delete3" icon="o-trash" />
</x-dropdown>

No anchor

By default, this component works with Alpine's anchor plugin. If you don't want to use it, just add no-x-anchor to the dropdown to manually control the position.

<x-dropdown label="Default" no-x-anchor>
    <x-menu-item title="Hey" />
    <x-menu-item title="How are you?" />
</x-dropdown>
 
<x-dropdown label="Top" no-x-anchor top>
    <x-menu-item title="Hey" />
    <x-menu-item title="How are you?" />
</x-dropdown>
 
<x-dropdown label="Right" no-x-anchor right>
    <x-menu-item title="Hey" />
    <x-menu-item title="It should align correctly on right side?" />
</x-dropdown>

maryUI

Sponsor