Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Yorkata's avatar

Drop Down Menu

I want to create a filter for my app. Never done this before and don't know from where to start.

Can you suggest me something? The more simple solution, the better (:

0 likes
6 replies
vincent15000's avatar

With TailwindCSS and AlpineJS, it's very simple to make a dropdown menu.

TailwindCSS will help you to style your menu very easily.

And AlpineJS will help you to show / hide it.

  1. You should begin with writing the menu, all displayed on the screen.

  2. Then you can hide it and code the show / hide functionality.

In this Laracast serie, you have an example with a customized select. The logic is quite the same for a dropdown menu.

https://laracasts.com/series/html-and-css-workshop/episodes/1

Yorkata's avatar

@vincent15000 Alpine did not work for me. So far the dropdown is working with Html and Bootstrap only. Even the route is working but its not changing the results

codeverseproo's avatar

Hey Yorkata and vincent15000,

I've been implementing Alpine.js dropdowns across several projects recently and wanted to share some additional techniques that might help.

While TailwindCSS handles the styling beautifully as mentioned, there are some extra Alpine.js tricks that can take your dropdowns to the next level:

  1. For keyboard accessibility, you can add: @keydown.escape.window="open = false" to close on Escape key @keydown.arrow-down.prevent="$el.nextElementSibling?.focus( )" for keyboard navigation

  2. For smooth transitions, these Alpine directives create a professional feel: x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100"

  3. For mobile-friendly dropdowns, add a rotating icon with: :class="{'rotate-180': open}" on your dropdown icon

I documented a complete implementation with all these enhancements here:

The performance comparison against jQuery is particularly interesting - I've seen page load improvements of ~300ms just by switching to Alpine for interactive elements.

Hope this helps with your implementation!

1 like

Please or to participate in this conversation.