Tailwind CSS Dropdown - Nuanxa
Komponen dropdown digunakan untuk menampilkan atau menyembunyikan daftar aksi, tautan, atau konten. Komponen ini dapat dipicu dengan klik atau hover dan mendukung berbagai tata letak.
Default dropdown
Dropdown dasar yang dipicu dengan klik.
<div class="relative inline-block text-left">
<button
data-dropdown-toggle="dropdown-default"
class="px-3 py-1.5 text-md font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Dropdown Button
<span class="fas fa-chevron-down text-xs"></span>
</button>
<ul
id="dropdown-default"
class="dropdown-menu hidden absolute top-10 right-0 w-44 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-50"
>
<li>
<a
href="#profile"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-user"></i> My Profile
</a>
</li>
<li>
<a
href="#settings"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-cog"></i> Settings
</a>
</li>
<li>
<form method="POST" action="/logout">
<button
type="submit"
class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-sign-out-alt"></i> Logout
</button>
</form>
</li>
</ul>
</div>
Hover dropdown
Dropdown yang muncul saat hover.
<div class="relative inline-block text-left">
<button
data-dropdown-toggle="dropdown-hover"
data-dropdown-mode="hover"
class="px-3 py-1.5 text-md font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Dropdown Button
<span class="fas fa-chevron-down text-xs"></span>
</button>
<ul
id="dropdown-hover"
class="dropdown-menu hidden absolute top-10 right-0 w-44 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-50"
>
<li>
<a
href="#profile"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-user"></i> My Profile
</a>
</li>
<li>
<a
href="#settings"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-cog"></i> Settings
</a>
</li>
<li>
<form method="POST" action="/logout">
<button
type="submit"
class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-sign-out-alt"></i> Logout
</button>
</form>
</li>
</ul>
</div>
Icon dropdown
Dropdown dengan pemicu berbasis ikon.
<div class="relative inline-block text-left">
<button
data-dropdown-toggle="icon-dropdown"
class="hover:text-gray-600 dark:hover:text-gray-300"
>
<i class="fas fa-ellipsis-h"></i>
</button>
<ul
id="icon-dropdown"
class="dropdown-menu hidden absolute left-0 w-40 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-20"
>
<li>
<a
href="#profile"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Edit Profile
</a>
</li>
<li>
<a
href="#settings"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Delete Account
</a>
</li>
</ul>
</div>
Notification dropdown
Dropdown untuk notifikasi atau peringatan.
<div class="relative inline-block text-left">
<button
data-dropdown-toggle="dropdown-notification"
class="hover:text-gray-600 dark:hover:text-gray-300"
>
<span class="fas fa-bell"></span>
<span
class="absolute -top-2 -right-2 bg-red-600 text-white text-[10px] font-semibold px-1 rounded-full border border-white dark:border-gray-800"
>
3
</span>
</button>
<div
id="dropdown-notification"
class="dropdown-menu hidden absolute left-0 w-64 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-20"
>
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<h6 class="text-sm font-semibold text-gray-700 dark:text-gray-200">
Notifications
</h6>
</div>
<ul class="max-h-60 overflow-y-auto">
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<div class="font-semibold">Payment received</div>
<div class="text-xs text-gray-500 dark:text-gray-400">
NovaTech Ltd. paid invoice INV-20251001
</div>
</a>
</li>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<div class="font-semibold">Pending payment</div>
<div class="text-xs text-gray-500 dark:text-gray-400">
Brightline Agency - invoice INV-20251002
</div>
</a>
</li>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<div class="font-semibold">Invoice overdue</div>
<div class="text-xs text-gray-500 dark:text-gray-400">
Cloudify Systems - invoice INV-20251004
</div>
</a>
</li>
</ul>
<div
class="text-center border-t border-gray-200 dark:border-gray-700 py-2 text-sm"
>
<a href="#all" class="text-blue-600 dark:text-blue-400 hover:underline"
>View all</a
>
</div>
</div>
</div>
Multi dropdown
Dropdown dengan beberapa bagian atau grup.
<div class="relative inline-block text-left">
<button
data-dropdown-toggle="dropdown-default"
class="px-3 py-1.5 text-md font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Dropdown Button
<span class="fas fa-chevron-down text-xs"></span>
</button>
<ul
id="dropdown-default"
class="dropdown-menu hidden absolute top-10 right-0 w-44 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-50"
>
<li>
<a
href="#profile"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-user"></i> My Profile
</a>
</li>
<li>
<a
href="#settings"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-cog"></i> Settings
</a>
</li>
<li>
<form method="POST" action="/logout">
<button
type="submit"
class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-sign-out-alt"></i> Logout
</button>
</form>
</li>
</ul>
</div>
Hover multi dropdown
Dropdown multi bagian yang dipicu saat hover.
<div class="relative inline-block text-left">
<button
data-dropdown-toggle="dropdown-default"
class="px-3 py-1.5 text-md font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Dropdown Button
<span class="fas fa-chevron-down text-xs"></span>
</button>
<ul
id="dropdown-default"
class="dropdown-menu hidden absolute top-10 right-0 w-44 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-50"
>
<li>
<a
href="#profile"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-user"></i> My Profile
</a>
</li>
<li>
<a
href="#settings"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-cog"></i> Settings
</a>
</li>
<li>
<form method="POST" action="/logout">
<button
type="submit"
class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
<i class="fas fa-sign-out-alt"></i> Logout
</button>
</form>
</li>
</ul>
</div>