Components
Tailwind CSS Dropdown
Tailwind CSS dropdown menu is essentially a user interface element which is used when a certain trigger element viz. button or a link is clicked or hovered over; displays a list of choices and further action.
Requires Pagedone JS
This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.
To use this component use need to do follwing steps:
- Add
dropdown-toggleclass to button element - Add
data-target="{id}"data attribute must be assigned to some element such a button, with the value being the id of the dropdown body, in order to open the dropdown component.
Default Dropdown
Using different Tailwind CSS classes these dropdown menus can be customized as per the requirement of the project.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-default" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 open" aria-labelledby="dropdown-default">
<ul class="py-2">
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Notifications </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</li>
</ul>
</div>
</div>Dropdown hover
You can use this dropdown menu if you want hover effect in menu.
<div class="dropdown relative inline-flex group">
<button id="dropdown-hover" type="button" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown Hover <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 hidden group-hover:block" aria-labelledby="dropdown-hover">
<ul class="py-2">
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Notifications </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</li>
</ul>
</div>
</div>Dropdown divider
List items inside the dropdown menu can be separated using the following classes.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-divider" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown Divider <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-divider" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 divide-y divide-gray-200" aria-labelledby="dropdown-with-divider">
<ul class="py-2">
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Notifications </a>
</li>
</ul>
<div class="py-2">
<a class="block px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</div>
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Dropdown header
Extra information can be shown as displayed below inside the tailwind dropdown menu.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-header" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown Header <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-header" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 divide-y divide-gray-200" aria-labelledby="dropdown-with-header">
<div class="px-4 py-3 flex gap-3 ">
<div class="block mt-1">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3331 5.83333C13.3331 7.67428 11.8407 9.16667 9.99976 9.16667C8.15881 9.16667 6.66642 7.67428 6.66642 5.83333C6.66642 3.99238 8.15881 2.5 9.99976 2.5C11.8407 2.5 13.3331 3.99238 13.3331 5.83333Z" stroke="black" stroke-width="1.6" />
<path d="M9.99976 11.6667C7.62619 11.6667 5.54235 12.752 4.36109 14.3865C3.73609 15.2513 3.42359 15.6837 3.88775 16.5918C4.35192 17.5 5.12342 17.5 6.66642 17.5H13.3331C14.8761 17.5 15.6476 17.5 16.1118 16.5918C16.5759 15.6837 16.2634 15.2513 15.6384 14.3865C14.4572 12.752 12.3733 11.6667 9.99976 11.6667Z" stroke="black" stroke-width="1.6" />
</svg>
</div>
<div class="block">
<div class="text-indigo-600 font-normal mb-1">Harsh11</div>
<div class="text-sm text-gray-500 font-medium truncate">harsh@pagedone.io</div>
</div>
</div>
<ul class="py-2">
<li>
<a class="block px-6 py-2 hover:text-indigo-600 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:text-indigo-600 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block px-6 py-2 hover:text-indigo-600 text-gray-900 font-medium" href="javascript:;"> Notifications </a>
</li>
</ul>
<div class="py-2">
<a class="block px-6 py-2 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</div>
</div>
</div> Dropdown with icon
Different menu icons can be used based on the design requirements.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-icon" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown with icons <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-icon" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2" aria-labelledby="dropdown-with-icon">
<ul class="py-2">
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4167 7.5C16.5673 7.5 17.5 8.43274 17.5 9.58333V12.5C17.5 14.857 17.5 16.0355 16.7678 16.7678C16.0355 17.5 14.857 17.5 12.5 17.5H7.5C5.14298 17.5 3.96447 17.5 3.23223 16.7678C2.5 16.0355 2.5 14.857 2.5 12.5V9.58333C2.5 8.43274 3.43274 7.5 4.58333 7.5M10 13.3333L6.50337 9.83671M10 13.3333L13.4966 9.83671M10 13.3333V2.5" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg> Downloads </a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10.8333H11.6667M5 13.3333H8.33333M11.3883 1.94437V5.55548C11.3883 6.47595 12.1345 7.22214 13.055 7.22214H16.6661M10.6985 1.66666H8.5C5.67157 1.66666 4.25736 1.66666 3.37868 2.54534C2.5 3.42402 2.5 4.83823 2.5 7.66666V12.3333C2.5 15.1618 2.5 16.576 3.37868 17.4546C4.25736 18.3333 5.67156 18.3333 8.49997 18.3333C9.30683 18.3333 10.1356 18.3333 10.945 18.3333C13.7731 18.3333 15.1871 18.3333 16.0658 17.4546C16.9444 16.576 16.9444 15.1618 16.9444 12.3333V7.91257C16.9444 7.47054 16.7689 7.04662 16.4563 6.73406L11.877 2.15481C11.5645 1.84225 11.1406 1.66666 10.6985 1.66666Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
</svg> Saved Files </a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1116 9.16666C15.2575 10.9606 15.8104 12.3731 16.3475 13.3586C16.7027 14.0104 16.2305 15 15.4881 15H4.51181C3.76939 15 3.27739 13.995 3.61578 13.3342C4.28214 12.0329 4.99996 9.94714 4.99996 6.99999C4.99996 5.58582 5.52663 4.22916 6.46413 3.22916C7.40246 2.22916 8.67496 1.66666 9.99996 1.66666C10.2808 1.66666 10.56 1.69166 10.8333 1.74166M11.4416 17.5C11.2953 17.7528 11.0851 17.9626 10.832 18.1085C10.579 18.2544 10.292 18.3312 9.99996 18.3312C9.70788 18.3312 9.42094 18.2544 9.1679 18.1085C8.91487 17.9626 8.70464 17.7528 8.5583 17.5M15 6.66666C15.663 6.66666 16.2989 6.40326 16.7677 5.93442C17.2366 5.46558 17.5 4.8297 17.5 4.16666C17.5 3.50362 17.2366 2.86773 16.7677 2.39889C16.2989 1.93005 15.663 1.66666 15 1.66666C14.3369 1.66666 13.701 1.93005 13.2322 2.39889C12.7634 2.86773 12.5 3.50362 12.5 4.16666C12.5 4.8297 12.7634 5.46558 13.2322 5.93442C13.701 6.40326 14.3369 6.66666 15 6.66666Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg> Notifications </a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.16667 17.5L5.83333 17.5V17.5C3.98765 17.5 2.5 16.0123 2.5 14.1667V14.1667L2.5 5.83333V5.83333C2.5 3.98765 3.98765 2.5 5.83333 2.5V2.5L9.16667 2.5M8.22814 10L17.117 10M14.3393 6.66667L17.0833 9.41074C17.3611 9.68852 17.5 9.82741 17.5 10C17.5 10.1726 17.3611 10.3115 17.0833 10.5893L14.3393 13.3333" stroke="#EF4444" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg> Log Out </a>
</li>
</ul>
</div>
</div> Dropdown with toggle
When one of the two choices needs to be selected the following dropdown menu tailwind example with toggle can be used. Eg. on or off, yes or no, active or inactive.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-togglebutton" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown Toggle <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-togglebutton" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2" aria-labelledby="dropdown-with-togglebutton">
<ul class="py-2">
<li>
<div class="block px-6 py-2 hover:bg-gray-100">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-none rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-base font-medium text-gray-900 ">Dark mode</span>
</label>
</div>
</li>
<li>
<div class="block px-6 py-2 hover:bg-gray-100">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-none rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-base font-medium text-gray-900 ">2F authentication</span>
</label>
</div>
</li>
<li>
<div class="block px-6 py-2 hover:bg-gray-100">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-none rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-base font-medium text-gray-900 ">Enable Notification</span>
</label>
</div>
</li>
<li>
<div class="block px-6 py-2 hover:bg-gray-100">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-none rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-base font-medium text-gray-900 ">Subscribe Newsletter</span>
</label>
</div>
</li>
</ul>
</div>
</div>Dropdown with radio
When only a single item inside the menu needs to be selected the following tailwind ui dropdown example can be used by keeping radio buttons.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-radiobutton" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown Radio <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-radiobutton" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 p-6" aria-labelledby="dropdown-with-radiobutton">
<div class="relative mb-4">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.75 15.75L14.25 14.25M15 8.25C15 11.9779 11.9779 15 8.25 15C4.52208 15 1.5 11.9779 1.5 8.25C1.5 4.52208 4.52208 1.5 8.25 1.5C11.9779 1.5 15 4.52208 15 8.25Z" stroke="#6B7280" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<input type="text" id="input-group-search" class="block w-full py-2 px-4 pl-10 text-sm text-gray-900 placeholder-gray-500 border border-gray-300 rounded-full focus:outline-none " placeholder="Search in list..">
</div>
<ul class="space-y-4">
<li>
<div class="flex items-center">
<input id="radio-group-1" type="radio" name="radio-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="radio-group-1" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
<span class="border border-gray-300 rounded-full mr-2 w-4 h-4 "></span> January </label>
</div>
</li>
<li>
<div class="flex items-center">
<input id="radio-group-2" type="radio" name="radio-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="radio-group-2" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
<span class="border border-gray-300 rounded-full mr-2 w-4 h-4 "></span> February </label>
</div>
</li>
<li>
<div class="flex items-center">
<input id="radio-group-3" type="radio" name="radio-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="radio-group-3" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
<span class="border border-gray-300 rounded-full mr-2 w-4 h-4 "></span> March </label>
</div>
</li>
<li>
<div class="flex items-center">
<input id="radio-group-4" type="radio" name="radio-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="radio-group-4" class="flex items-center cursor-pointer text-gray-900 text-sm font-medium">
<span class="border border-gray-300 rounded-full mr-2 w-4 h-4 "></span> April </label>
</div>
</li>
</ul>
</div>
</div>Dropdown with checkbox
Multiple checkboxes can be added in this style of dropdown menu.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-check" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown Checkbox <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-check" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 p-6" aria-labelledby="dropdown-with-check">
<div class="relative mb-4">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.75 15.75L14.25 14.25M15 8.25C15 11.9779 11.9779 15 8.25 15C4.52208 15 1.5 11.9779 1.5 8.25C1.5 4.52208 4.52208 1.5 8.25 1.5C11.9779 1.5 15 4.52208 15 8.25Z" stroke="#6B7280" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<input type="text" id="input-group-search" class="block w-full py-2 px-4 pl-10 text-sm text-gray-900 placeholder-gray-500 border border-gray-300 rounded-full focus:outline-none " placeholder="Search in list..">
</div>
<ul class="space-y-4">
<li>
<div class="flex items-center">
<input id="checkbox-example-1" type="checkbox" value="" class="w-5 h-5 appearance-none border border-gray-300 rounded-md mr-2 hover:border-indigo-500 hover:bg-indigo-100 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-example-1" class="text-base font-medium text-gray-900 cursor-pointer">January</label>
</div>
</li>
<li>
<div class="flex items-center">
<input id="checkbox-example-2" type="checkbox" value="" class="w-5 h-5 appearance-none border border-gray-300 rounded-md mr-2 hover:border-indigo-500 hover:bg-indigo-100 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-example-2" class="text-base font-medium text-gray-900 cursor-pointer">February</label>
</div>
</li>
<li>
<div class="flex items-center">
<input id="checkbox-example-3" type="checkbox" value="" class="w-5 h-5 appearance-none border border-gray-300 rounded-md mr-2 hover:border-indigo-500 hover:bg-indigo-100 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-example-3" class="text-base font-medium text-gray-900 cursor-pointer">March</label>
</div>
</li>
<li>
<div class="flex items-center">
<input id="checkbox-example-4" type="checkbox" value="" class="w-5 h-5 appearance-none border border-gray-300 rounded-md mr-2 hover:border-indigo-500 hover:bg-indigo-100 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-example-4" class="text-base font-medium text-gray-900 cursor-pointer">April</label>
</div>
</li>
</ul>
</div>
</div>Dropdown with Heading
Here tailwind select dropdown also have heading above menu links.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-subheading" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown Header <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-subheading" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 divide-y divide-gray-200" aria-labelledby="dropdown-with-subheading">
<div class="px-4 py-3 flex gap-3 ">
<div class="block mt-1">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3331 5.83333C13.3331 7.67428 11.8407 9.16667 9.99976 9.16667C8.15881 9.16667 6.66642 7.67428 6.66642 5.83333C6.66642 3.99238 8.15881 2.5 9.99976 2.5C11.8407 2.5 13.3331 3.99238 13.3331 5.83333Z" stroke="black" stroke-width="1.6"></path>
<path d="M9.99976 11.6667C7.62619 11.6667 5.54235 12.752 4.36109 14.3865C3.73609 15.2513 3.42359 15.6837 3.88775 16.5918C4.35192 17.5 5.12342 17.5 6.66642 17.5H13.3331C14.8761 17.5 15.6476 17.5 16.1118 16.5918C16.5759 15.6837 16.2634 15.2513 15.6384 14.3865C14.4572 12.752 12.3733 11.6667 9.99976 11.6667Z" stroke="black" stroke-width="1.6"></path>
</svg>
</div>
<div class="block">
<div class="text-indigo-600 font-normal mb-1">Harsh11</div>
<div class="text-sm text-gray-500 font-medium truncate">harsh@pagedone.io</div>
</div>
</div>
<ul class="py-2">
<span class="block px-6 py-2 text-sm font-medium text-gray-500 "> Settings </span>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4167 7.5C16.5673 7.5 17.5 8.43274 17.5 9.58333V12.5C17.5 14.857 17.5 16.0355 16.7678 16.7678C16.0355 17.5 14.857 17.5 12.5 17.5H7.5C5.14298 17.5 3.96447 17.5 3.23223 16.7678C2.5 16.0355 2.5 14.857 2.5 12.5V9.58333C2.5 8.43274 3.43274 7.5 4.58333 7.5M10 13.3333L6.50337 9.83671M10 13.3333L13.4966 9.83671M10 13.3333V2.5" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Downloads </a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10.8333H11.6667M5 13.3333H8.33333M11.3883 1.94437V5.55548C11.3883 6.47595 12.1345 7.22214 13.055 7.22214H16.6661M10.6985 1.66666H8.5C5.67157 1.66666 4.25736 1.66666 3.37868 2.54534C2.5 3.42402 2.5 4.83823 2.5 7.66666V12.3333C2.5 15.1618 2.5 16.576 3.37868 17.4546C4.25736 18.3333 5.67156 18.3333 8.49997 18.3333C9.30683 18.3333 10.1356 18.3333 10.945 18.3333C13.7731 18.3333 15.1871 18.3333 16.0658 17.4546C16.9444 16.576 16.9444 15.1618 16.9444 12.3333V7.91257C16.9444 7.47054 16.7689 7.04662 16.4563 6.73406L11.877 2.15481C11.5645 1.84225 11.1406 1.66666 10.6985 1.66666Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
</svg> Saved Files </a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1116 9.16666C15.2575 10.9606 15.8104 12.3731 16.3475 13.3586C16.7027 14.0104 16.2305 15 15.4881 15H4.51181C3.76939 15 3.27739 13.995 3.61578 13.3342C4.28214 12.0329 4.99996 9.94714 4.99996 6.99999C4.99996 5.58582 5.52663 4.22916 6.46413 3.22916C7.40246 2.22916 8.67496 1.66666 9.99996 1.66666C10.2808 1.66666 10.56 1.69166 10.8333 1.74166M11.4416 17.5C11.2953 17.7528 11.0851 17.9626 10.832 18.1085C10.579 18.2544 10.292 18.3312 9.99996 18.3312C9.70788 18.3312 9.42094 18.2544 9.1679 18.1085C8.91487 17.9626 8.70464 17.7528 8.5583 17.5M15 6.66666C15.663 6.66666 16.2989 6.40326 16.7677 5.93442C17.2366 5.46558 17.5 4.8297 17.5 4.16666C17.5 3.50362 17.2366 2.86773 16.7677 2.39889C16.2989 1.93005 15.663 1.66666 15 1.66666C14.3369 1.66666 13.701 1.93005 13.2322 2.39889C12.7634 2.86773 12.5 3.50362 12.5 4.16666C12.5 4.8297 12.7634 5.46558 13.2322 5.93442C13.701 6.40326 14.3369 6.66666 15 6.66666Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> Notifications </a>
</li>
</ul>
<div class="py-2">
<span class="block px-6 py-2 text-sm font-medium text-gray-500 "> Settings </span>
<a class="block px-6 py-2 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</div>
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Dropdown with Helper text
Here, extra text can be added below each radio button to make it more simplified and easy for users to understand the action.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-helper-text" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-helper-text" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 divide-y divide-gray-200" aria-labelledby="dropdown-with-helper-text">
<div class="px-4 py-3 flex gap-3 ">
<div class="block mt-1">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3331 5.83333C13.3331 7.67428 11.8407 9.16667 9.99976 9.16667C8.15881 9.16667 6.66642 7.67428 6.66642 5.83333C6.66642 3.99238 8.15881 2.5 9.99976 2.5C11.8407 2.5 13.3331 3.99238 13.3331 5.83333Z" stroke="black" stroke-width="1.6"></path>
<path d="M9.99976 11.6667C7.62619 11.6667 5.54235 12.752 4.36109 14.3865C3.73609 15.2513 3.42359 15.6837 3.88775 16.5918C4.35192 17.5 5.12342 17.5 6.66642 17.5H13.3331C14.8761 17.5 15.6476 17.5 16.1118 16.5918C16.5759 15.6837 16.2634 15.2513 15.6384 14.3865C14.4572 12.752 12.3733 11.6667 9.99976 11.6667Z" stroke="black" stroke-width="1.6"></path>
</svg>
</div>
<div class="block">
<div class="text-indigo-600 font-normal mb-1">Harsh11</div>
<div class="text-sm text-gray-500 font-medium truncate">harsh@pagedone.io</div>
</div>
</div>
<ul class="py-2">
<span class="block px-6 py-2 text-sm font-medium text-gray-500 "> Settings </span>
<li>
<a href="javascript:;">
<div class="flex gap-3 px-6 py-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-1">
<path d="M15.4167 7.5C16.5673 7.5 17.5 8.43274 17.5 9.58333V12.5C17.5 14.857 17.5 16.0355 16.7678 16.7678C16.0355 17.5 14.857 17.5 12.5 17.5H7.5C5.14298 17.5 3.96447 17.5 3.23223 16.7678C2.5 16.0355 2.5 14.857 2.5 12.5V9.58333C2.5 8.43274 3.43274 7.5 4.58333 7.5M10 13.3333L6.50337 9.83671M10 13.3333L13.4966 9.83671M10 13.3333V2.5" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<div class="block">
<h6 class="text-gray-900 font-medium">Downloads</h6>
<p class="text-sm text-gray-500">This is supporting text</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:;">
<div class="flex gap-3 px-6 py-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10.8334H11.6667M5 13.3334H8.33333M11.3883 1.9444V5.55551C11.3883 6.47598 12.1345 7.22218 13.055 7.22218H16.6661M10.6985 1.66669H8.5C5.67157 1.66669 4.25736 1.66669 3.37868 2.54537C2.5 3.42405 2.5 4.83826 2.5 7.66669V12.3334C2.5 15.1618 2.5 16.576 3.37868 17.4547C4.25736 18.3334 5.67156 18.3334 8.49997 18.3334C9.30683 18.3334 10.1356 18.3334 10.945 18.3334C13.7731 18.3334 15.1871 18.3334 16.0658 17.4547C16.9444 16.576 16.9444 15.1618 16.9444 12.3334V7.9126C16.9444 7.47057 16.7689 7.04665 16.4563 6.73409L11.877 2.15484C11.5645 1.84228 11.1406 1.66669 10.6985 1.66669Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" />
</svg>
<div class="block">
<h6 class="text-gray-900 font-medium">Saved Files</h6>
<p class="text-sm text-gray-500">This is supporting text</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:;">
<div class="flex gap-3 px-6 py-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1116 9.16669C15.2575 10.9606 15.8104 12.3731 16.3475 13.3586C16.7027 14.0105 16.2305 15 15.4881 15H4.51181C3.76939 15 3.27739 13.995 3.61578 13.3342C4.28214 12.0329 4.99996 9.94717 4.99996 7.00002C4.99996 5.58585 5.52663 4.22919 6.46413 3.22919C7.40246 2.22919 8.67496 1.66669 9.99996 1.66669C10.2808 1.66669 10.56 1.69169 10.8333 1.74169M11.4416 17.5C11.2953 17.7528 11.0851 17.9627 10.832 18.1085C10.579 18.2544 10.292 18.3312 9.99996 18.3312C9.70788 18.3312 9.42094 18.2544 9.1679 18.1085C8.91487 17.9627 8.70464 17.7528 8.5583 17.5M15 6.66669C15.663 6.66669 16.2989 6.40329 16.7677 5.93445C17.2366 5.46561 17.5 4.82973 17.5 4.16669C17.5 3.50365 17.2366 2.86776 16.7677 2.39892C16.2989 1.93008 15.663 1.66669 15 1.66669C14.3369 1.66669 13.701 1.93008 13.2322 2.39892C12.7634 2.86776 12.5 3.50365 12.5 4.16669C12.5 4.82973 12.7634 5.46561 13.2322 5.93445C13.701 6.40329 14.3369 6.66669 15 6.66669Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="block">
<h6 class="text-gray-900 font-medium">Notifications</h6>
<p class="text-sm text-gray-500">This is supporting text</p>
</div>
</div>
</a>
</li>
</ul>
<div class="py-2">
<span class="block px-6 py-2 text-sm font-medium text-gray-500 "> Settings </span>
<a class="block " href="javascript:;">
<div class="flex gap-3 px-6 py-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.16667 17.5L5.83333 17.5V17.5C3.98765 17.5 2.5 16.0123 2.5 14.1667V14.1667L2.5 5.83333V5.83333C2.5 3.98765 3.98765 2.5 5.83333 2.5V2.5L9.16667 2.5M8.22814 10L17.117 10M14.3393 6.66667L17.0833 9.41074C17.3611 9.68852 17.5 9.82741 17.5 10C17.5 10.1726 17.3611 10.3115 17.0833 10.5893L14.3393 13.3333" stroke="#EF4444" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="block">
<h6 class="text-red-500 font-medium">Log Out</h6>
<p class="text-sm text-gray-500">This is supporting text</p>
</div>
</div>
</a>
</div>
</div>
</div>Multi-level dropdown
Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown <svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-default-main" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 open hidden" aria-labelledby="dropdown-default-main">
<ul class="py-2">
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="flex items-center justify-between px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium dropdown-toggle" href="javascript:void(0)" data-target="dropdown-default-sub"> Notifications <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00378 5.99561L15.004 11.9959L9.00024 17.9996" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
</a>
<ul class="open hidden absolute translate-x-44 right-0 -translate-y-7 bg-white shadow-lg rounded-xl w-44 dropdown-toggle " data-target="dropdown-default-main" id="dropdown-default-sub">
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium dropdown-toggle" href="javascript:;"></a>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Notifications </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</li>
</ul>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</li>
</ul>
</div>
</div> Dropdown top
Use this example open dropdown menu on top
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-dropup" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown top <svg class="dropdown-open:rotate-180 w-4 h-4 text-white" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.99622 14.9963L11.9965 8.99609L18.0002 14.9999" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
</button>
<div id="dropdown-with-dropup" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-0 -translate-y-52 w-72 mt-2 open" aria-labelledby="dropdown-with-dropup">
<ul class="py-2">
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Notifications </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</li>
</ul>
</div>
</div>Dropdown right
Use this example to open dropdown menu on top right
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-dropright" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-5 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 "> Dropdown right <svg class="dropdown-open:rotate-180 w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00378 5.99561L15.004 11.9959L9.00024 17.9996" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
</button>
<div id="dropdown-with-dropright" class="dropdown-menu rounded-xl shadow-lg bg-white absolute right-0 top-0 translate-x-64 w-64 mt-2 open" aria-labelledby="dropdown-with-dropright">
<ul class="py-2">
<li>
<a class="block pl-5 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block pl-5 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block pl-5 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</li>
</ul>
</div>
</div>Dropdown left
Use this example to open dropdown menu on left
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-dropleft" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 ">
<svg class="dropdown-open:rotate-180 w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0001 17.9996L8.99988 11.9994L15.0037 5.99561" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg> Dropdown left </button>
<div id="dropdown-with-dropleft" class="dropdown-menu rounded-xl shadow-lg bg-white absolute left-0 top-0 -translate-x-64 w-64 mt-2 open" aria-labelledby="dropdown-with-dropleft">
<ul class="py-2">
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Downloads </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;"> Saved Files </a>
</li>
<li>
<a class="block px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;"> Log Out </a>
</li>
</ul>
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More