Dropdown Component

The Dropdown component provides a fully accessible menu with keyboard navigation, focus trapping, and smooth transitions. It uses Alpine.js for state management and includes support for keyboard shortcuts (Space, Enter, Arrow keys, and Escape).

Usage

The dropdown component uses named slots for the trigger and content:

<x-dropdown>
    <x-slot:trigger>
        <x-button>Open Menu</x-button>
    </x-slot:trigger>

    <x-slot:content>
        <x-dropdown-link href="/profile">Profile</x-dropdown-link>
        <x-dropdown-link href="/settings">Settings</x-dropdown-link>
        <x-dropdown-link href="/logout">Logout</x-dropdown-link>
    </x-slot:content>
</x-dropdown>

Profile Settings Logout

Alignment

Control where the dropdown appears relative to the trigger using the align prop:

<x-dropdown align="left">
    <!-- ... -->
</x-dropdown>

<x-dropdown align="right">
    <!-- ... -->
</x-dropdown>

Option 1 Option 2 Option 3

Width

Customize the dropdown width using the width prop. The default is 48 (w-48), but you can pass any Tailwind width class:

<x-dropdown width="w-64">
    <!-- ... -->
</x-dropdown>

This is a wider dropdown menu With more space for content

With Icons

Add icons to dropdown items for better visual context:

<x-dropdown>
    <x-slot:trigger>
        <x-button>Account</x-button>
    </x-slot:trigger>

    <x-slot:content>
        <x-dropdown-link href="/profile">
            <x-icons.user />
            Profile
        </x-dropdown-link>
        <x-dropdown-link href="/settings">
            <x-icons.cog-6-tooth />
            Settings
        </x-dropdown-link>
    </x-slot:content>
</x-dropdown>

Profile Settings Logout

Props Reference

Dropdown

Prop	Type	Default	Description
`align`	string	`right`	Alignment of the dropdown. Options: `left`, `right`, `top`, or any custom Tailwind classes
`width`	string	`48`	Width of the dropdown. Use `48` for `w-48` or pass any Tailwind width class like `w-64`
`contentClasses`	string	Default styling	Custom classes for the dropdown content container. Override the default styling if needed.

Dropdown Link

The dropdown link component extends the standard <a> tag and accepts all anchor attributes (href, target, etc.).

References

Category	Path / Name	Description
Component	resources/views/components/dropdown.blade.php	Main dropdown component
Component	resources/views/components/dropdown-link.blade.php	Styled link component for dropdown items

For the detailed documentation, please visit the Penguin UI Dropdowns.