Phara UI

Phara UI v2.x

Dropdown

A versatile dropdown menu component with customizable triggers and menu items.

Basic

Default dropdown component with basic menu items

Blade

<x-ui::dropdown>
<x-slot:trigger>
    <x-ui::button variant="outline">Options</x-ui::button>
</x-slot:trigger>
<x-ui::dropdown-item>Profile</x-ui::dropdown-item>
<x-ui::dropdown-item>Settings</x-ui::dropdown-item>
<x-ui::dropdown-item>Logout</x-ui::dropdown-item>
</x-ui::dropdown>

Alignment

Control the alignment of the dropdown menu relative to the trigger.

Blade

<x-ui::dropdown align="right">
<x-slot:trigger>
    <x-ui::button>Right Aligned</x-ui::button>
</x-slot:trigger>
<x-ui::dropdown-item>Item 1</x-ui::dropdown-item>
<x-ui::dropdown-item>Item 2</x-ui::dropdown-item>
</x-ui::dropdown>

Width

Control the width of the dropdown menu.


                                <x-ui::dropdown
                                 width=
                                "lg"
                                >
                                ...
                                </x-ui::dropdown>

With Icons

Add icons to dropdown items for better visual clarity.


                                <x-ui::dropdown-item
                                 icon=
                                "user"
                                >
                                Profile
                                </x-ui::dropdown-item>

Custom Trigger

Use any element as a dropdown trigger.


                                <x-ui::dropdown>
                                 <x-slot:trigger>...</x-slot:trigger>
                                </x-ui::dropdown>