Dropdown

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

Examples

Simple Trigger

Passing a string to the trigger prop uses a default styled button.

blade

<x-plume::dropdown trigger="Options" align="left" width="sm">
    <x-plume::dropdown.item>Profile</x-plume::dropdown.item>
    <x-plume::dropdown.item>Settings</x-plume::dropdown.item>
    <x-plume::dropdown.separator />
    <x-plume::dropdown.item style="error">Logout</x-plume::dropdown.item>
</x-plume::dropdown>

Custom Trigger

Use the trigger slot for complete control over the button's appearance.

blade

<x-plume::dropdown align="right" width="md">
    <x-slot name="trigger">
        <x-plume::button shape="round" style="secondary">
            <x-plume::icon i="icon-[fluent--more-horizontal-24-regular]" class="size-5" />
        </x-plume::button>
    </x-slot>

    <x-plume::dropdown.item href="#">Edit</x-plume::dropdown.item>
    <x-plume::dropdown.item>Duplicate</x-plume::dropdown.item>
    <x-plume::dropdown.item>Archive</x-plume::dropdown.item>
    <x-plume::dropdown.separator />
    <x-plume::dropdown.item style="error" href="#"
        method="delete">Delete</x-plume::dropdown.item>
</x-plume::dropdown>

Prop	Type	Default	Description
trigger	string	null	The text or slot content for the dropdown trigger button.
align	string	'right'	Alignment of the dropdown menu: 'left', 'right', 'top'.
width	string	'md'	Width of the menu: 'xs', 'sm', 'md', 'lg', 'xl', or custom CSS width class.
contentClasses	string	'bg-background dark:bg-background-800'	Additional classes for the menu container.
triggerStyle	string	'outline'	Visual style of the automatic trigger button: 'primary', 'secondary', 'error', 'outline', 'ghost', 'link', 'minor'.
onOpen	string	null	AlpineJS expression or function to call when the dropdown opens.
onClose	string	null	AlpineJS expression or function to call when the dropdown closes.

Usage

blade

<x-plume::dropdown align="right" width="sm">
    <x-slot name="trigger">
        <x-plume::button>Click Me</x-plume::button>
    </x-slot>

    <x-plume::dropdown.item href="/profile">
        Profile
    </x-plume::dropdown.item>

    <x-plume::dropdown.separator />

    <x-plume::dropdown.item style="error" @click="logout()">
        Logout
    </x-plume::dropdown.item>
</x-plume::dropdown>