blatui

Components

Dropdown Menu

Displays a menu of actions or functions, triggered by a button.

php artisan blatui:add dropdown-menu

A dropdown-menu-item renders type="button" by default. To submit the surrounding form from a menu item, pass type="submit" (or href to navigate).

<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-label>My Account</x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-group>
            <x-ui.dropdown-menu-item>
                Profile
                <x-ui.dropdown-menu-shortcut>⇧⌘P</x-ui.dropdown-menu-shortcut>
            </x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item>
                Billing
                <x-ui.dropdown-menu-shortcut>⌘B</x-ui.dropdown-menu-shortcut>
            </x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item>
                Settings
                <x-ui.dropdown-menu-shortcut>⌘S</x-ui.dropdown-menu-shortcut>
            </x-ui.dropdown-menu-item>
        </x-ui.dropdown-menu-group>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-item>
            Log out
            <x-ui.dropdown-menu-shortcut>⇧⌘Q</x-ui.dropdown-menu-shortcut>
        </x-ui.dropdown-menu-item>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

Account

{{-- Avatar-triggered account menu with a user header. --}}
<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="ghost" class="size-9 rounded-full p-0" aria-label="Open account menu">
            <x-ui.avatar class="size-9">
                <x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
                <x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
            </x-ui.avatar>
        </x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="end">
        <x-ui.dropdown-menu-label class="font-normal">
            <div class="flex flex-col space-y-0.5">
                <span class="text-sm font-medium">shadcn</span>
                <span class="text-muted-foreground text-xs">[email protected]</span>
            </div>
        </x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-group>
            <x-ui.dropdown-menu-item><x-lucide-user aria-hidden="true" /> Profile</x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item><x-lucide-credit-card aria-hidden="true" /> Billing</x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item><x-lucide-settings aria-hidden="true" /> Settings</x-ui.dropdown-menu-item>
        </x-ui.dropdown-menu-group>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-item variant="destructive"><x-lucide-log-out aria-hidden="true" /> Log out</x-ui.dropdown-menu-item>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

Checkboxes

<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-label>Appearance</x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-checkbox-item :checked="true">Status Bar</x-ui.dropdown-menu-checkbox-item>
        <x-ui.dropdown-menu-checkbox-item disabled>Activity Bar</x-ui.dropdown-menu-checkbox-item>
        <x-ui.dropdown-menu-checkbox-item>Panel</x-ui.dropdown-menu-checkbox-item>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

Radio Group

<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-label>Panel Position</x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-radio-group value="bottom">
            <x-ui.dropdown-menu-radio-item value="top">Top</x-ui.dropdown-menu-radio-item>
            <x-ui.dropdown-menu-radio-item value="bottom">Bottom</x-ui.dropdown-menu-radio-item>
            <x-ui.dropdown-menu-radio-item value="right">Right</x-ui.dropdown-menu-radio-item>
        </x-ui.dropdown-menu-radio-group>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

Submenu

<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-item><x-lucide-user aria-hidden="true" /> Profile</x-ui.dropdown-menu-item>
        <x-ui.dropdown-menu-sub>
            <x-ui.dropdown-menu-sub-trigger><x-lucide-user-plus aria-hidden="true" /> Invite users</x-ui.dropdown-menu-sub-trigger>
            <x-ui.dropdown-menu-sub-content>
                <x-ui.dropdown-menu-item><x-lucide-mail aria-hidden="true" /> Email</x-ui.dropdown-menu-item>
                <x-ui.dropdown-menu-item><x-lucide-message-square aria-hidden="true" /> Message</x-ui.dropdown-menu-item>
                <x-ui.dropdown-menu-separator />
                <x-ui.dropdown-menu-item><x-lucide-plus-circle aria-hidden="true" /> More…</x-ui.dropdown-menu-item>
            </x-ui.dropdown-menu-sub-content>
        </x-ui.dropdown-menu-sub>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-item><x-lucide-settings aria-hidden="true" /> Settings</x-ui.dropdown-menu-item>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

With Icons

<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Account</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-label>My Account</x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-group>
            <x-ui.dropdown-menu-item><x-lucide-user aria-hidden="true" /> Profile <x-ui.dropdown-menu-shortcut>⇧⌘P</x-ui.dropdown-menu-shortcut></x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item><x-lucide-credit-card aria-hidden="true" /> Billing <x-ui.dropdown-menu-shortcut>⌘B</x-ui.dropdown-menu-shortcut></x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item><x-lucide-settings aria-hidden="true" /> Settings <x-ui.dropdown-menu-shortcut>⌘S</x-ui.dropdown-menu-shortcut></x-ui.dropdown-menu-item>
        </x-ui.dropdown-menu-group>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-item><x-lucide-github aria-hidden="true" /> GitHub</x-ui.dropdown-menu-item>
        <x-ui.dropdown-menu-item><x-lucide-life-buoy aria-hidden="true" /> Support</x-ui.dropdown-menu-item>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-item variant="destructive"><x-lucide-log-out aria-hidden="true" /> Log out <x-ui.dropdown-menu-shortcut>⇧⌘Q</x-ui.dropdown-menu-shortcut></x-ui.dropdown-menu-item>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

API Reference

Props, slots and exposed methods for <x-ui.dropdown-menu>.

Props

Prop Type Default Description
align string 'start' Set on <x-ui.dropdown-menu-content>. Aligns the menu along the trigger edge it is anchored to.
start center end
side string 'bottom' Set on <x-ui.dropdown-menu-content>. Which edge of the trigger the menu opens from.
top right bottom left
sideOffset int 4 Set on <x-ui.dropdown-menu-content>. Gap in pixels between the trigger and the menu.
href string — Set on <x-ui.dropdown-menu-item>. Renders the item as a link (<a>) to this URL instead of a button.
variant string 'default' Set on <x-ui.dropdown-menu-item>. Use destructive to style dangerous actions in the destructive color.
default destructive
inset bool false Set on an item, label, or sub-trigger to add left padding so its text lines up with items that have a leading icon or check.
disabled bool false Set on <x-ui.dropdown-menu-item> to disable it (not focusable, not clickable, dimmed).
closeOnSelect bool true Set on <x-ui.dropdown-menu-item> (true) — closes the menu after the item is chosen. On checkbox/radio items it defaults to false so the menu stays open while toggling.
type string 'button' Set on <x-ui.dropdown-menu-item>. Use submit to submit the surrounding <form> when the item is clicked.
button submit
checked bool false Set on <x-ui.dropdown-menu-checkbox-item> for its initial checked state.
value string — On <x-ui.dropdown-menu-radio-group> it is the initially selected value; on each <x-ui.dropdown-menu-radio-item> it is that option's value. The item whose value matches the group is shown as selected.

Slots

Slot Description
default Compose the menu from <x-ui.dropdown-menu-trigger> and <x-ui.dropdown-menu-content>. The wrapper holds the shared open/focus state.
trigger Content of <x-ui.dropdown-menu-trigger> — the element (e.g. a button) that opens the menu.
content Content of <x-ui.dropdown-menu-content> — items, labels, separators, groups, checkbox/radio items, and submenus. Teleported to <body>.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
openMenu(focus) Opens the menu. Pass 'first' or 'last' to focus that item (keyboard open), or omit to focus the menu container (pointer open).
closeMenu(returnFocus = true) Closes the menu and, unless returnFocus is false, restores focus to the trigger.
toggleMenu() Opens the menu if closed, otherwise closes it.