Dropdowns are a crucial element of modern web design, offering a clean way to present multiple options without cluttering the interface. In this blog post, we’ll explore how to create simple dropdowns using Tailwind CSS. Whether you’re building a navigation menu, a form selection, or any other UI component, these examples will help you implement sleek and functional dropdowns with ease. Follow along to discover how Tailwind CSS can streamline your dropdown designs and enhance your project’s user experience.
Simple Dropdown
<div class="relative">
<!-- Dropdown toggle button -->
<button class="flex items-center p-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<span class="mr-2">Dropdown</span>
<!-- Add an icon if you want, e.g., a chevron icon -->
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<!-- Dropdown list -->
<div class="absolute right-0 py-2 mt-2 bg-white border border-gray-200 rounded-md shadow-lg w-44">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Dropdown List 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Dropdown List 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Dropdown List 3</a>
</div>
</div>
Dropdowns Using Only Icons
<div class="relative">
<!-- Dropdown toggle button -->
<button
class="flex items-center justify-center p-2 bg-gray-800 text-white rounded-full hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
<!-- Dropdown List -->
<div class="absolute right-0 w-48 py-2 mt-2 bg-white border border-gray-200 rounded-md shadow-lg">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Dropdown List 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Dropdown List 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Dropdown List 3</a>
</div>
</div>
Dropdowns Tailwind with AlpineJS
<div x-data="{ open: false }" class="relative">
<!-- Dropdown toggle button -->
<button @click="open = !open" class="flex items-center p-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<span class="mr-2">Dropdown</span>
<!-- Chevron icon -->
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<!-- Dropdown list -->
<div x-show="open" @click.away="open = false" class="absolute right-0 py-2 mt-2 bg-white border border-gray-200 rounded-md shadow-lg w-44">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Dropdown List 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Dropdown List 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Dropdown List 3</a>
</div>
</div>