Powerful suite of Blade components for TALL Stack apps.

Dropdown

Dropdown component.

Menu
<x-dropdown text="Menu" position="bottom-end">
<x-dropdown.items text="Settings" />
<x-dropdown.items text="Logout" separator />
</x-dropdown>

All available positions based on the AlpineJS anchor plugin.

Menu
<!-- Available Positions:
bottom,
bottom-start,
bottom-end,
top,
top-start,
top-end,
left,
left-start,
left-end,
right,
right-start,
right-end
-->
 
<x-dropdown text="Menu" position="bottom-start">
<x-dropdown.items text="Settings" />
<x-dropdown.items text="Logout" separator />
</x-dropdown>
<x-dropdown icon="chevron-down">
<x-dropdown.items text="Settings" />
<x-dropdown.items text="Logout" separator />
</x-dropdown>

An option to use icons without rotate animation

<x-dropdown icon="ellipsis-vertical" static>
<x-dropdown.items text="Settings" />
<x-dropdown.items text="Logout" separator />
</x-dropdown>
Menu
<x-dropdown text="Menu">
<x-slot:header>
<p>Welcome!</p>
</x-slot:header>
<x-dropdown.items icon="cog" text="Settings" />
<x-dropdown.items icon="arrow-left-on-rectangle" text="Logout" separator />
</x-dropdown>
<x-dropdown>
<x-slot:action>
<x-button x-on:click="show = !show" sm outline>Open</x-button>
</x-slot:action>
<x-dropdown.items icon="cog" text="Settings" />
<x-dropdown.items icon="arrow-left-on-rectangle" text="Logout" separator />
</x-dropdown>
Previous
Card
Next
Error

Code highlighting provided by Torchlight