There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

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>
Menu
<x-dropdown text="Menu"
x-on:open="alert(`Open, 'show' status: ${$event.detail.status}`)"
x-on:select="alert('Selected')">
<x-dropdown.items text="Settings" />
<x-dropdown.items text="Logout" separator />
</x-dropdown>

Code highlighting provided by Torchlight