Skip to content

Overview

The Dropdown component provides a toggleable overlay menu powered by Alpine.js. It consists of a trigger element (button or any clickable element) and a menu panel that appears on click. Items can be links, buttons, or separated into groups. The dropdown supports glass morphism styling and closes on outside click or Escape key.

Use dropdowns for:

  • Action menus (edit, delete, share)
  • User profile menus
  • Navigation sub-menus
  • Contextual options

Basic Usage

<x-aura::dropdown>
    <x-slot:trigger>
        <x-aura::button variant="outline">Options</x-aura::button>
    </x-slot:trigger>

    <x-aura::dropdown.item href="/profile" icon="user">Profile</x-aura::dropdown.item>
    <x-aura::dropdown.item href="/settings" icon="settings">Settings</x-aura::dropdown.item>
    <x-aura::dropdown.separator />
    <x-aura::dropdown.item icon="lock">Logout</x-aura::dropdown.item>
</x-aura::dropdown>

Props

Prop Type Default Description
position string 'bottom-start' Menu position relative to trigger
width string 'w-48' CSS width class for the menu panel
glass bool false Apply glass morphism effect to the menu
Prop Type Default Description
icon string|null null Icon name displayed before the label
variant string|null null Set to 'danger' for destructive action styling
href string|null null URL. Renders as <a> when set, <button> otherwise
type string 'button' Button type when rendering as <button>

No props. Renders a visual divider between item groups.

Variants/Examples

Action Menu

<x-aura::dropdown>
    <x-slot:trigger>
        <x-aura::button icon="more-vertical" iconOnly variant="ghost" aria-label="Actions" />
    </x-slot:trigger>

    <x-aura::dropdown.item icon="eye" href="/posts/1">View</x-aura::dropdown.item>
    <x-aura::dropdown.item icon="pencil" href="/posts/1/edit">Edit</x-aura::dropdown.item>
    <x-aura::dropdown.item icon="copy">Duplicate</x-aura::dropdown.item>
    <x-aura::dropdown.separator />
    <x-aura::dropdown.item icon="trash" variant="danger">Delete</x-aura::dropdown.item>
</x-aura::dropdown>

User Profile Menu

<x-aura::dropdown width="w-56">
    <x-slot:trigger>
        <button class="flex items-center gap-2">
            <x-aura::avatar name="Jane Doe" size="sm" />
            <span>Jane Doe</span>
            <x-aura::icon name="chevron-down" size="xs" />
        </button>
    </x-slot:trigger>

    <x-aura::dropdown.item icon="user" href="/profile">My Profile</x-aura::dropdown.item>
    <x-aura::dropdown.item icon="settings" href="/settings">Settings</x-aura::dropdown.item>
    <x-aura::dropdown.item icon="mail" href="/notifications">Notifications</x-aura::dropdown.item>
    <x-aura::dropdown.separator />
    <x-aura::dropdown.item icon="lock" variant="danger">Sign Out</x-aura::dropdown.item>
</x-aura::dropdown>

Glass Morphism Style

<x-aura::dropdown glass>
    <x-slot:trigger>
        <x-aura::button variant="ghost">Menu</x-aura::button>
    </x-slot:trigger>

    <x-aura::dropdown.item icon="home">Dashboard</x-aura::dropdown.item>
    <x-aura::dropdown.item icon="bar-chart">Analytics</x-aura::dropdown.item>
    <x-aura::dropdown.item icon="file">Reports</x-aura::dropdown.item>
</x-aura::dropdown>

With Livewire Actions

<x-aura::dropdown>
    <x-slot:trigger>
        <x-aura::button variant="outline" size="sm">Actions</x-aura::button>
    </x-slot:trigger>

    <x-aura::dropdown.item icon="check" wire:click="markAsComplete">
        Mark Complete
    </x-aura::dropdown.item>
    <x-aura::dropdown.item icon="share" wire:click="share">
        Share
    </x-aura::dropdown.item>
    <x-aura::dropdown.separator />
    <x-aura::dropdown.item icon="trash" variant="danger" wire:click="delete"
        wire:confirm="Are you sure?">
        Delete
    </x-aura::dropdown.item>
</x-aura::dropdown>

Slots

Slot Description
trigger The element that toggles the menu (required)
Default Menu content: items, separators
Slot Description
Default Item label text

Events

The dropdown uses Alpine.js internally to manage open/close state:

  • Open: Click on the trigger element
  • Close: Click outside the menu, press Escape, or click a menu item link

To react to dropdown state changes from a parent Alpine component:

<div x-data="{ dropdownOpen: false }" x-on:click.away="dropdownOpen = false">
    <x-aura::dropdown x-model="dropdownOpen">
        {{-- items --}}
    </x-aura::dropdown>
</div>

Accessibility

  • The trigger element toggles visibility on click.
  • Pressing Escape closes the menu via x-on:keydown.escape.window.
  • Clicking outside the dropdown closes it via x-on:click.away.
  • Menu items render as <a> (navigable links) or <button> elements, both keyboard-focusable.
  • The dropdown uses x-transition for smooth open/close animations.
  • For icon-only triggers, always include aria-label on the trigger button.