Laravel Dropdown Component

Free · MIT

Toggleable overlay menu for actions, navigation, and context menus.

A Dropdown built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::dropdown>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

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>

See the full API, props and live examples in the Dropdown documentation.

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

Props

Dropdown

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

Dropdown Item

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>`