In this tutorial, we’ll explore Tailwind CSS dropdown menus triggered on hover, along with hover transitions and durations managed using Alpine.js and Tailwind CSS. We’ll also cover dropdowns embedded within icon menus and demonstrate how to utilize the ‘mouseover’ event in Alpine.js. All examples will be implemented using Tailwind CSS.
Example 1
We use Alpine.js to manage the dropdown’s visibility. When the mouse enters the button area, it opens, and when it leaves, it closes. The dropdown toggles its visibility based on this state, and it closes when clicking outside of it.
<div x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" class="relative">
<button class="px-4 py-2 bg-blue-500 text-white rounded-md shadow">Hover Dropdown</button>
<div x-show="open" @click.away="open = false"
class="absolute top-full left-0 mt-2 w-48 bg-white rounded-md shadow-lg">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Dropdown Item 1</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Dropdown Item 2</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Dropdown Item 3</a>
</div>
</div>
Example 2
Tailwind CSS dropdowns with icon and transition duration on hover, Using Alpine.js.
<div x-data="{ open: false }" class="relative inline-block text-left">
<!-- Trigger button -->
<button @mouseenter="open = true" @mouseleave="open = false" type="button"
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100 transition duration-300">
Dropdown
<!-- Dropdown indicator icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="ml-2 -mr-1 w-5 h-5" :class="{ 'transform rotate-180': open, '': !open }">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</button>
<!-- Dropdown menu -->
<div x-show.transition.opacity="open" x-transition:enter.duration.500ms x-transition:leave.duration.800ms
class="absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
@mouseenter="open = true" @mouseleave="open = false" role="menu" aria-orientation="vertical"
aria-labelledby="options-menu">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem">Item 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem">Item 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
role="menuitem">Item 3</a>
</div>
</div>
</div>