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>
Examples
Tailwind CSS Dropdown Examples
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.
File Actions Dropdown Example
A Dropdown menu with file action options including view, download, share, duplicate, archive, and delete with keyboard shortcuts
<!-- file action dropdown -->
<div class="h-72">
<div class="dropdown relative">
<button type="button" data-target="dropdown-default-main0"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-blue-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-blue-600 ">
File Action <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-main0"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-48 open hidden text-base"
aria-labelledby="dropdown-default-main0">
<ul class="p-1 text-neutral-600">
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2.45448 13.8008C1.84656 12.6796 1.84656 11.3204 2.45447 10.1992C4.29523 6.80404 7.87965 4.5 11.9999 4.5C16.1202 4.5 19.7046 6.80404 21.5454 10.1992C22.1533 11.3204 22.1533 12.6796 21.5454 13.8008C19.7046 17.196 16.1202 19.5 11.9999 19.5C7.87965 19.5 4.29523 17.196 2.45448 13.8008Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M15.0126 11.9551C15.0126 13.6119 13.6695 14.9551 12.0126 14.9551C10.3558 14.9551 9.01263 13.6119 9.01263 11.9551C9.01263 10.2982 10.3558 8.95508 12.0126 8.95508C13.6695 8.95508 15.0126 10.2982 15.0126 11.9551Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> View Details </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.5 9C19.8807 9 21 10.1193 21 11.5V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V11.5C3 10.1193 4.11929 9 5.5 9"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M12 16L7.80408 11.804M12 16L16.196 11.804M12 16V3" stroke="#737373"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg> Download </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M7 17C7 18.1046 6.10457 19 5 19C3.89543 19 3 18.1046 3 17C3 15.8954 3.89543 15 5 15C6.10457 15 7 15.8954 7 17Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M21 17C21 18.1046 20.1046 19 19 19C17.8954 19 17 18.1046 17 17C17 15.8954 17.8954 15 19 15C20.1046 15 21 15.8954 21 17Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M4 12.9624C4 9.98729 5.60879 7.38975 8 6M16 6C18.3912 7.38975 20 9.98729 20 12.9624M8 19.9247C9.17669 20.6086 10.5429 21 12 21C13.4571 21 14.8233 20.6086 16 19.9247"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Share </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9C15 11.8284 15 13.2426 14.1213 14.1213C13.2426 15 11.8284 15 9 15C6.17157 15 4.75736 15 3.87868 14.1213C3 13.2426 3 11.8284 3 9Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M9 15C9 17.8284 9 19.2426 9.87868 20.1213C10.7574 21 12.1716 21 15 21C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15C21 12.1716 21 10.7574 20.1213 9.87868C19.2426 9 17.8284 9 15 9"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Duplicate </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li>
<a class="px-2 py-1 hover:bg-gray-100 flex items-center gap-2 text-red-500 font-medium rounded-sm transition-all duration-500"
href="javascript:;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#f44336" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#f44336" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
</svg> Delete
</a>
</li>
</ul>
</div>
</div>
</div>Table Row Actions Dropdown Example
A Dropdown menu for data table row actions with edit, duplicate, favorite, report, archive, and delete operations in a compact vertical layout
<!-- Table Row Actions -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main1"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-blue-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-blue-600 ">
Table Row Actions <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-main1"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-48 open hidden text-base"
aria-labelledby="dropdown-default-main1">
<ul class="p-1 text-neutral-600">
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.6711 4.48785L11.4428 9.78833C11.2429 9.99099 11.143 10.0923 11.0761 10.2152L11.0727 10.2215C11.0067 10.3448 10.9772 10.4832 10.9184 10.7599C10.6297 12.1177 10.4853 12.7966 10.8705 13.1765C10.8766 13.1825 10.8827 13.1885 10.889 13.1943C11.2839 13.5644 11.9721 13.4037 13.3486 13.0822C13.6235 13.0181 13.7609 12.986 13.8822 12.9197L13.8839 12.9187C14.0051 12.8521 14.1048 12.7545 14.3042 12.5592L19.6099 7.36337C20.2676 6.71937 20.5964 6.39736 20.6034 5.99372C20.6103 5.59008 20.2928 5.25743 19.6579 4.59212L19.5804 4.51093C18.9033 3.80151 18.5647 3.4468 18.1347 3.44338C17.7047 3.43997 17.3602 3.78926 16.6711 4.48785Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path d="M19.0007 8.00004L16 5" stroke="#737373" stroke-width="2" class="my-path">
</path>
<path
d="M13.5882 3H11C7.22876 3 5.34315 3 4.17157 4.17157C3 5.34315 3 7.22876 3 11V13C3 16.7712 3 18.6569 4.17157 19.8284C5.34315 21 7.22876 21 11 21H13C16.7712 21 18.6569 21 19.8284 19.8284C21 18.6569 21 16.7712 21 13V11.4706"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>Edit </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9C15 11.8284 15 13.2426 14.1213 14.1213C13.2426 15 11.8284 15 9 15C6.17157 15 4.75736 15 3.87868 14.1213C3 13.2426 3 11.8284 3 9Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M9 15C9 17.8284 9 19.2426 9.87868 20.1213C10.7574 21 12.1716 21 15 21C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15C21 12.1716 21 10.7574 20.1213 9.87868C19.2426 9 17.8284 9 15 9"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Duplicate </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.512 6.85387C11.2957 4.44185 11.6876 3.23584 12.4141 3.23584C13.1406 3.23584 13.5325 4.44185 14.3162 6.85387L14.6592 7.9096C14.8759 8.57627 14.9842 8.9096 15.247 9.10058C15.5099 9.29157 15.8604 9.29157 16.5614 9.29157H17.6969C20.2549 9.29157 21.534 9.29157 21.7571 9.98531C21.9803 10.6791 20.9412 11.4248 18.863 12.9164L17.9611 13.5637C17.3883 13.9748 17.1019 14.1803 17.0001 14.4906C16.8983 14.8008 17.0073 15.1361 17.2251 15.8066L17.5654 16.8539C18.3491 19.2659 18.741 20.4719 18.1532 20.899C17.5654 21.326 16.5395 20.5807 14.4877 19.0899L13.5897 18.4375C13.0226 18.0254 12.739 17.8194 12.4141 17.8194C12.0892 17.8194 11.8056 18.0254 11.2385 18.4375L10.3405 19.0899C8.28869 20.5807 7.2628 21.326 6.67501 20.899C6.08723 20.4719 6.47908 19.2659 7.2628 16.8539L7.60582 15.7981C7.82244 15.1315 7.93074 14.7981 7.83034 14.4891C7.72993 14.1801 7.44638 13.9741 6.87928 13.5621L5.98123 12.9096C3.92944 11.4189 2.90354 10.6735 3.12805 9.98255C3.35257 9.29157 4.62064 9.29157 7.1568 9.29157H8.26685C8.96783 9.29157 9.31832 9.29157 9.58118 9.10058C9.84405 8.9096 9.95235 8.57627 10.169 7.9096L10.512 6.85387Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Favorite </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 3V21M12.1179 12.9039C14.5537 13.7732 16.2578 13.787 18.0484 13.2438C18.2566 13.1807 18.4433 13.0623 18.5964 12.9077C18.855 12.6465 19 12.2938 19 11.9263V4.24732C19 4.18228 18.9667 4.12175 18.9118 4.08692C18.8542 4.05041 18.7816 4.0478 18.7207 4.07854C16.9248 4.98539 14.5923 4.94899 11.8052 3.95118C10.7888 3.59054 9.70841 3.44354 8.63215 3.51942C7.94736 3.56771 6.88691 3.90785 6.2061 4.1489C5.78083 4.29947 5.43542 4.61068 5.22343 5.00889L5.11587 5.21093C5.03979 5.35383 5 5.51324 5 5.67514V13.4113C5 13.4652 5.07694 13.4745 5.08987 13.4223C5.09301 13.4096 5.10144 13.3988 5.11304 13.3928C6.18116 12.8379 7.35238 12.5075 8.55408 12.4223C9.76262 12.3365 10.9759 12.5004 12.1179 12.9039Z"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Report </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H15C16.8856 3 17.8284 3 18.4142 3.58579C19 4.17157 19 5.11438 19 7V17.1136C19 18.8158 19 19.6668 18.4576 19.946C17.9152 20.2251 17.2226 19.7304 15.8375 18.7411L14.325 17.6607C13.2023 16.8588 12.6409 16.4578 12 16.4578C11.3591 16.4578 10.7977 16.8588 9.67505 17.6607L8.16248 18.7411C6.77738 19.7304 6.08484 20.2251 5.54242 19.946C5 19.6668 5 18.8158 5 17.1136V7Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Archive </a>
</li>
<li>
<a class="block px-2 py-1 hover:bg-gray-100 flex items-center gap-2 text-red-500 font-medium rounded-sm transition-all duration-500"
href="javascript:;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#f44336" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#f44336" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Delete
</a>
</li>
</ul>
</div>
</div>
</div>Card Actions with Nested Share Dropdown Example
A Dropdown menu with nested submenu for social sharing options including Email, Twitter, Facebook, and LinkedIn alongside edit and delete actions
<!-- Card Actions with Nested Share -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main2"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-blue-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-blue-600 ">
Card Actions <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-ellipsis h-4 w-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div id="dropdown-default-main2"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-48 open hidden text-base"
aria-labelledby="dropdown-default-main2">
<ul class="p-1 text-neutral-600">
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.6711 4.48785L11.4428 9.78833C11.2429 9.99099 11.143 10.0923 11.0761 10.2152L11.0727 10.2215C11.0067 10.3448 10.9772 10.4832 10.9184 10.7599C10.6297 12.1177 10.4853 12.7966 10.8705 13.1765C10.8766 13.1825 10.8827 13.1885 10.889 13.1943C11.2839 13.5644 11.9721 13.4037 13.3486 13.0822C13.6235 13.0181 13.7609 12.986 13.8822 12.9197L13.8839 12.9187C14.0051 12.8521 14.1048 12.7545 14.3042 12.5592L19.6099 7.36337C20.2676 6.71937 20.5964 6.39736 20.6034 5.99372C20.6103 5.59008 20.2928 5.25743 19.6579 4.59212L19.5804 4.51093C18.9033 3.80151 18.5647 3.4468 18.1347 3.44338C17.7047 3.43997 17.3602 3.78926 16.6711 4.48785Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path d="M19.0007 8.00004L16 5" stroke="#737373" stroke-width="2" class="my-path">
</path>
<path
d="M13.5882 3H11C7.22876 3 5.34315 3 4.17157 4.17157C3 5.34315 3 7.22876 3 11V13C3 16.7712 3 18.6569 4.17157 19.8284C5.34315 21 7.22876 21 11 21H13C16.7712 21 18.6569 21 19.8284 19.8284C21 18.6569 21 16.7712 21 13V11.4706"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>Edit </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9C15 11.8284 15 13.2426 14.1213 14.1213C13.2426 15 11.8284 15 9 15C6.17157 15 4.75736 15 3.87868 14.1213C3 13.2426 3 11.8284 3 9Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M9 15C9 17.8284 9 19.2426 9.87868 20.1213C10.7574 21 12.1716 21 15 21C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15C21 12.1716 21 10.7574 20.1213 9.87868C19.2426 9 17.8284 9 15 9"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Duplicate </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li class="relative group flex items-center justify-between">
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500 "
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M7 17C7 18.1046 6.10457 19 5 19C3.89543 19 3 18.1046 3 17C3 15.8954 3.89543 15 5 15C6.10457 15 7 15.8954 7 17Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M21 17C21 18.1046 20.1046 19 19 19C17.8954 19 17 18.1046 17 17C17 15.8954 17.8954 15 19 15C20.1046 15 21 15.8954 21 17Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M4 12.9624C4 9.98729 5.60879 7.38975 8 6M16 6C18.3912 7.38975 20 9.98729 20 12.9624M8 19.9247C9.17669 20.6086 10.5429 21 12 21C13.4571 21 14.8233 20.6086 16 19.9247"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Share </a>
<svg width="16" height="16" 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="#737373" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<div
class="hidden group-hover:block p-2 bg-white shadow-lg rounded-md absolute -right-32 -top-4">
<ul>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12C3 8.22876 3 6.34315 4.17157 5.17157C5.34315 4 7.22876 4 11 4H13C16.7712 4 18.6569 4 19.8284 5.17157C21 6.34315 21 8.22876 21 12C21 15.7712 21 17.6569 19.8284 18.8284C18.6569 20 16.7712 20 13 20H11C7.22876 20 5.34315 20 4.17157 18.8284C3 17.6569 3 15.7712 3 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M3.54883 6.73307L7.76733 9.36198C9.82587 10.6448 10.8551 11.2863 11.9998 11.2861C13.1445 11.2859 14.1736 10.6441 16.2317 9.36063L20.461 6.72314"
stroke="#737373" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg> Email </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"
aria-hidden="true">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg> Twitter </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"
aria-hidden="true">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z">
</path>
</svg> Facebook </a>
</li>
</ul>
</div>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H15C16.8856 3 17.8284 3 18.4142 3.58579C19 4.17157 19 5.11438 19 7V17.1136C19 18.8158 19 19.6668 18.4576 19.946C17.9152 20.2251 17.2226 19.7304 15.8375 18.7411L14.325 17.6607C13.2023 16.8588 12.6409 16.4578 12 16.4578C11.3591 16.4578 10.7977 16.8588 9.67505 17.6607L8.16248 18.7411C6.77738 19.7304 6.08484 20.2251 5.54242 19.946C5 19.6668 5 18.8158 5 17.1136V7Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Archive </a>
</li>
<li>
<a class="block px-2 py-1 hover:bg-gray-100 flex items-center gap-2 text-red-500 font-medium rounded-sm transition-all duration-500"
href="javascript:;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#f44336" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#f44336" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Delete
</a>
</li>
</ul>
</div>
</div>
</div> Batch Actions Dropdown Example
A Dropdown menu for bulk operations on multiple selected items showing selection count with actions like mark complete, tag, export, archive, and delete
<!-- Batch Actions Dropdown -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main4"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-2 px-3 shadow-xs text-sm bg-white border text-black rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gray-200 ">
Batch Actions <svg class=" w-2.5 h-2.5 text-black" 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-main4"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-48 open hidden text-base"
aria-labelledby="dropdown-default-main4">
<h4 class="font-medium text-base px-2 pt-1.5">3 items selected</h4>
<ul class="p-1 text-neutral-600">
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M8 11.7236L9.53269 13.2563C10.1994 13.923 10.5327 14.2563 10.9469 14.2563C11.3611 14.2563 11.6945 13.923 12.3611 13.2563L16.6704 8.94702"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>Mark as Complete </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path d="M15 9L9 15M9 9L15 15" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Mark as Incomplete </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-4 h-4" aria-hidden="true">
<path
d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z">
</path>
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg> Add Tags </a>
</li>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.5 9C19.8807 9 21 10.1193 21 11.5V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V11.5C3 10.1193 4.11929 9 5.5 9"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M12 16L7.80408 11.804M12 16L16.196 11.804M12 16V3" stroke="#737373"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg> Export Selected </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li>
<a class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H15C16.8856 3 17.8284 3 18.4142 3.58579C19 4.17157 19 5.11438 19 7V17.1136C19 18.8158 19 19.6668 18.4576 19.946C17.9152 20.2251 17.2226 19.7304 15.8375 18.7411L14.325 17.6607C13.2023 16.8588 12.6409 16.4578 12 16.4578C11.3591 16.4578 10.7977 16.8588 9.67505 17.6607L8.16248 18.7411C6.77738 19.7304 6.08484 20.2251 5.54242 19.946C5 19.6668 5 18.8158 5 17.1136V7Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Archive Selected</a>
</li>
<li>
<a class="block px-2 py-1 hover:bg-gray-100 flex items-center gap-2 text-red-500 font-medium rounded-sm transition-all duration-500"
href="javascript:;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#f44336" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#f44336" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#f44336" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Delete Selected
</a>
</li>
</ul>
</div>
</div>
</div>Text Formatting Dropdown Example
A Text formatting dropdown menu with Bold, Italic, Underline, Strikethrough, and Code options plus keyboard shortcuts
<!-- Text Formatting Dropdown -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main5"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-2 px-3 text-sm bg-white border text-black rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-type h-4 w-4" aria-hidden="true">
<path d="M12 4v16"></path>
<path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"></path>
<path d="M9 20h6"></path>
</svg>
</button>
<div id="dropdown-default-main5"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-64 open hidden text-base"
aria-labelledby="dropdown-default-main5">
<ul class="p-1 text-neutral-600">
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-4 h-4" aria-hidden="true">
<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path>
</svg> Bold </a>
<span class="text-neutral-500">⌘B</span>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-4 h-4" aria-hidden="true">
<line x1="19" x2="10" y1="4" y2="4"></line>
<line x1="14" x2="5" y1="20" y2="20"></line>
<line x1="15" x2="9" y1="4" y2="20"></line>
</svg> Italic </a>
<span class="text-neutral-500">⌘I</span>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-4 h-4" aria-hidden="true">
<path d="M6 4v6a6 6 0 0 0 12 0V4"></path>
<line x1="4" x2="20" y1="20" y2="20"></line>
</svg> Underline </a>
<span class="text-neutral-500">⌘U</span>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-code" aria-hidden="true">
<path d="m16 18 6-6-6-6"></path>
<path d="m8 6-6 6 6 6"></path>
</svg> Code </a>
<span class="text-neutral-500">⌘E</span>
</li>
</ul>
</div>
</div>
</div>Insert Options Dropdown Example
A Insert options dropdown menu for Image, Video, Link, Table, Code Block, and File with keyboard shortcut hints
<!-- Insert Options Dropdown -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main6"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-2 px-3 text-sm bg-white border text-black rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-gray-100">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M19 12H5" stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
</svg>
</button>
<div id="dropdown-default-main6"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-64 open hidden text-base"
aria-labelledby="dropdown-default-main6">
<ul class="p-1 text-neutral-600">
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.58487 19L7.07189 15.2455C7.69252 14.4869 8.00284 14.1076 8.40938 14.0633C8.47386 14.0563 8.53887 14.0555 8.60349 14.0611C9.01094 14.0961 9.32986 14.4682 9.9677 15.2123C10.6306 15.9857 10.962 16.3723 11.381 16.4005C11.4473 16.4049 11.5139 16.4027 11.5797 16.394C11.996 16.3387 12.3016 15.9312 12.9127 15.1164L14.3606 13.1858C15.11 12.1867 15.4847 11.6871 15.9919 11.693C16.4992 11.6989 16.8622 12.207 17.5881 13.2233L21 18M21 18V11C21 7.22876 21 5.34315 19.8284 4.17157C18.6569 3 16.7712 3 13 3H11C7.22876 3 5.34315 3 4.17157 4.17157C3 5.34315 3 7.22876 3 11V13C3 16.7712 3 18.6569 4.17157 19.8284C5.34315 21 7.22876 21 11 21H18C19.6569 21 21 19.6569 21 18Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M12 9C12 10.1046 11.1046 11 10 11C8.89543 11 8 10.1046 8 9C8 7.89543 8.89543 7 10 7C11.1046 7 12 7.89543 12 9Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Image </a>
<span class="text-neutral-500">⌘⇧I</span>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2 10C2 7.17157 2 5.75736 2.87868 4.87868C3.75736 4 5.17157 4 8 4H11C13.8284 4 15.2426 4 16.1213 4.87868C17 5.75736 17 7.17157 17 10V14C17 16.8284 17 18.2426 16.1213 19.1213C15.2426 20 13.8284 20 11 20H8C5.17157 20 3.75736 20 2.87868 19.1213C2 18.2426 2 16.8284 2 14V10Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M18.8531 8.20273L17 9.49989V15.4999L18.8531 16.797C20.2334 17.7633 20.9236 18.2464 21.4618 17.9662C22 17.686 22 16.8435 22 15.1586V9.8412C22 8.15625 22 7.31377 21.4618 7.03356C20.9236 6.75335 20.2334 7.23648 18.8531 8.20273Z"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Video </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.1008 11.6999L18.6008 10.1999C19.9262 8.87439 19.9262 6.72536 18.6008 5.39987C17.2753 4.07439 15.1262 4.07439 13.8008 5.39987L10.8008 8.39987C9.47527 9.72536 9.47527 11.8744 10.8008 13.1999"
stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
<path
d="M6.90036 12.2998L5.40036 13.7998C4.07488 15.1253 4.07488 17.2743 5.40036 18.5998C6.72585 19.9253 8.87488 19.9253 10.2004 18.5998L13.2004 15.5998C14.5258 14.2743 14.5258 12.1253 13.2004 10.7998"
stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg> Link </a>
<span class="text-neutral-500">⌘K</span>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17V7M3 17C3 18.8856 3 19.8284 3.58579 20.4142C4.17157 21 5.11438 21 7 21H17C18.8856 21 19.8284 21 20.4142 20.4142C21 19.8284 21 18.8856 21 17M3 17H21M21 17V7M21 7C21 5.11438 21 4.17157 20.4142 3.58579C19.8284 3 18.8856 3 17 3H7C5.11438 3 4.17157 3 3.58579 3.58579C3 4.17157 3 5.11438 3 7M21 7L3 7M12 3V21M21 12H3"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Table </a>
<span class="text-neutral-500">⌘⇧T</span>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-code" aria-hidden="true">
<path d="m16 18 6-6-6-6"></path>
<path d="m8 6-6 6 6 6"></path>
</svg> Code Block </a>
<span class="text-neutral-500">⌘⇧C</span>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path d="M7 13H15" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
<path d="M7 16H12" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
</svg>File </a>
</li>
</ul>
</div>
</div>
</div>Profile Dropdown with Avatar Example
A Profile dropdown with circular avatar trigger showing user info, Profile, Settings, Help, and Log out options
<!-- Profile Dropdown with Avatar -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main7"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-2 px-3 text-sm text-black rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500">
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
</button>
<div id="dropdown-default-main7"
class="dropdown-menu rounded-xl shadow-lg bg-white border absolute top-full w-64 open hidden text-base"
aria-labelledby="dropdown-default-main7">
<div class="flex flex-col gap-1 border-b px-3 py-2">
<p class="font-medium text-sm leading-none">Hayden Bleasel</p>
<p class="text-neutral-500 text-xs leading-none">hello@haydenbleasel.com</p>
</div>
<ul class="p-1 text-neutral-600">
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M20 21V20.1429C20 19.0805 20 18.5493 19.8997 18.1099C19.5578 16.6119 18.3881 15.4422 16.8901 15.1003C16.4507 15 15.9195 15 14.8571 15H10C8.13623 15 7.20435 15 6.46927 15.3045C5.48915 15.7105 4.71046 16.4892 4.30448 17.4693C4 18.2044 4 19.1362 4 21"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Profile </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5549 10.6412C20.3556 10.1761 20.6309 9.15209 20.1714 8.34816L19.3411 6.89536C18.8707 6.07218 17.8203 5.78887 16.9997 6.26383C15.8596 6.92371 14.4329 6.07159 14.4329 4.75429C14.4329 3.79494 13.6552 3 12.6958 3H11.0821C10.1459 3 9.38699 3.75891 9.38699 4.69507V4.81514C9.38699 6.06839 8.0289 6.85046 6.94495 6.22141C6.16637 5.76958 5.16886 6.03634 4.71974 6.81648L3.83811 8.34789C3.37563 9.15123 3.64979 10.1773 4.45133 10.6429C5.56596 11.2904 5.56353 12.9023 4.45117 13.5537C3.65059 14.0225 3.37509 15.0511 3.83797 15.8551L4.71974 17.3868C5.16886 18.167 6.16921 18.4321 6.94779 17.9802C8.0283 17.3532 9.38699 18.1299 9.38699 19.3792C9.38699 20.2744 10.1126 21 11.0078 21H12.7701C13.6884 21 14.4329 20.2556 14.4329 19.3373C14.4329 18.0565 15.82 17.2567 16.9285 17.8982L16.9997 17.9395C17.8203 18.4144 18.8707 18.1311 19.3411 17.3079L20.1716 15.8549C20.6314 15.0503 20.3548 14.0237 19.555 13.5554C18.4414 12.9032 18.439 11.2895 19.5549 10.6412Z"
stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
class="my-path"></path>
<path
d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Setting </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M9.23163 9.2148C9.23163 5.59165 14.7684 5.59165 14.7684 9.2148C14.7684 11.8031 12.2525 11.2866 12.2525 14.3913"
stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
<path d="M11.975 17.5026L12.025 17.5026" stroke="#737373" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
</svg> Help </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500 text-red-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="m16 17 5-5-5-5"></path>
<path d="M21 12H9"></path>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
</svg> Log out </a>
</li>
</ul>
</div>
</div>
</div>Profile Dropdown with Status Example
A Profile dropdown with online status indicator and Pro badge showing enhanced user identity with billing and account options
<!-- Profile Dropdown with Status -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main8"
class="dropdown-toggle relative inline-flex justify-center items-center gap-2 w-fit text-sm text-black rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500">
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png' alt='avatar'>
<span class="absolute right-0 bottom-0 h-3 w-3 rounded-full bg-green-500 border-2 border-white"></span>
</button>
<div id="dropdown-default-main8"
class="dropdown-menu rounded-xl shadow-lg bg-white border absolute top-full w-64 open hidden text-base"
aria-labelledby="dropdown-default-main8">
<div class="flex items-center gap-3 border-b px-2">
<img class='w-10 h-10 rounded-full' src='https://pagedone.io/asset/uploads/1762340174.png'
alt='avatar'>
<div class="flex flex-col gap-1 py-2">
<p class="font-medium text-sm leading-none">Hayden Bleasel</p>
<p class="text-neutral-500 text-xs leading-none">hello@haydenbleasel.com</p>
<span class="px-2 py-0.5 w-fit text-xs rounded-full font-medium bg-gray-100">Pro</span>
</div>
</div>
<ul class="p-1 text-neutral-600">
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M20 21V20.1429C20 19.0805 20 18.5493 19.8997 18.1099C19.5578 16.6119 18.3881 15.4422 16.8901 15.1003C16.4507 15 15.9195 15 14.8571 15H10C8.13623 15 7.20435 15 6.46927 15.3045C5.48915 15.7105 4.71046 16.4892 4.30448 17.4693C4 18.2044 4 19.1362 4 21"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Profile </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4 9C4 6.17157 4 4.75736 4.87868 3.87868C5.75736 3 7.17157 3 10 3H14C16.8284 3 18.2426 3 19.1213 3.87868C20 4.75736 20 6.17157 20 9V15C20 17.8284 20 19.2426 19.1213 20.1213C18.2426 21 16.8284 21 14 21H10C7.17157 21 5.75736 21 4.87868 20.1213C4 19.2426 4 17.8284 4 15V9Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path d="M4 9H20" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
<path d="M14 6L17 6" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M8.05 13L8 13" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M8.05 17L8 17" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M12.05 13L12 13" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M12.05 17L12 17" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M16.05 13L16 13" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M16.05 17L16 17" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Billing </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5549 10.6412C20.3556 10.1761 20.6309 9.15209 20.1714 8.34816L19.3411 6.89536C18.8707 6.07218 17.8203 5.78887 16.9997 6.26383C15.8596 6.92371 14.4329 6.07159 14.4329 4.75429C14.4329 3.79494 13.6552 3 12.6958 3H11.0821C10.1459 3 9.38699 3.75891 9.38699 4.69507V4.81514C9.38699 6.06839 8.0289 6.85046 6.94495 6.22141C6.16637 5.76958 5.16886 6.03634 4.71974 6.81648L3.83811 8.34789C3.37563 9.15123 3.64979 10.1773 4.45133 10.6429C5.56596 11.2904 5.56353 12.9023 4.45117 13.5537C3.65059 14.0225 3.37509 15.0511 3.83797 15.8551L4.71974 17.3868C5.16886 18.167 6.16921 18.4321 6.94779 17.9802C8.0283 17.3532 9.38699 18.1299 9.38699 19.3792C9.38699 20.2744 10.1126 21 11.0078 21H12.7701C13.6884 21 14.4329 20.2556 14.4329 19.3373C14.4329 18.0565 15.82 17.2567 16.9285 17.8982L16.9997 17.9395C17.8203 18.4144 18.8707 18.1311 19.3411 17.3079L20.1716 15.8549C20.6314 15.0503 20.3548 14.0237 19.555 13.5554C18.4414 12.9032 18.439 11.2895 19.5549 10.6412Z"
stroke="#737373" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
class="my-path"></path>
<path
d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Account Setting </a>
</li>
<div class="bg-gray-200 -mx-1 my-1 h-px"></div>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500 text-red-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="m16 17 5-5-5-5"></path>
<path d="M21 12H9"></path>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
</svg> Log out </a>
</li>
</ul>
</div>
</div>
</div>Theme Selector Dropdown Example
A Theme selector dropdown with Light, Dark, and System options using DropdownMenuRadioGroup and theme icons
<!-- Theme Selector Dropdown -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main9"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-2 px-3 text-sm text-black border rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4" aria-hidden="true">
<path
d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z">
</path>
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
</button>
<div id="dropdown-default-main9"
class="dropdown-menu rounded-xl shadow-lg bg-white border absolute top-full w-64 open hidden text-base"
aria-labelledby="dropdown-default-main9">
<h4 class="text-sm font-medium px-3 py-2 border-b">Theme</h4>
<ul class="p-1 text-neutral-600">
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path d="M12 3V5" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
<path d="M12 19V21" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M18.3654 5.63623L16.9512 7.05044" stroke="#737373" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M7.05093 16.9497L5.63672 18.3639" stroke="#737373" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M18.3654 18.3644L16.9512 16.9502" stroke="#737373" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M7.05093 7.04996L5.63672 5.63574" stroke="#737373" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M21 12L19 12" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M5 12L3 12" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Light </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 11.6014C3 16.7922 7.09519 21.0001 12.1469 21.0001C15.273 21.0001 18.0328 19.3887 19.6826 16.9301C20.3756 15.8974 20.7221 15.381 20.41 14.8411C20.0979 14.3012 19.3273 14.3541 17.7861 14.4599C10.8576 14.9353 8.58646 10.8359 8.23195 6.90293C8.066 5.0618 7.98302 4.14123 7.355 3.93743C6.72697 3.73363 6.26281 4.26556 5.3345 5.32941C3.8829 6.99296 3 9.19125 3 11.6014Z"
stroke="#737373" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Dark </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="#737373" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<rect width="20" height="14" x="2" y="3" rx="2"></rect>
<line x1="8" x2="16" y1="21" y2="21"></line>
<line x1="12" x2="12" y1="17" y2="21"></line>
</svg> System </a>
</li>
</ul>
</div>
</div>
</div>Language Selector Dropdown Example
A Language selector dropdown with country flag emojis and language names
<!-- Language Selector Dropdown -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main10"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-2 px-3 text-sm text-black border rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 9H12M12 9V7M12 9H14M14 9H16M14 9C14.2734 10.6401 13.65 12.5791 12.3752 14M12.3752 14C11.3181 15.1781 9.81318 16 8 16M12.3752 14C12.7501 14.5 14 16 16 16M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Language
</button>
<div id="dropdown-default-main10"
class="dropdown-menu rounded-xl shadow-lg bg-white border absolute top-full w-64 open hidden text-base"
aria-labelledby="dropdown-default-main10">
<h4 class="text-sm font-medium px-3 py-2 border-b">Select Language</h4>
<ul class="p-1 text-neutral-600">
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<span>🇺🇸</span> English </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<span>🇪🇸</span> Español </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<span>🇫🇷</span> Français </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<span>🇩🇪</span> Deutsch </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<span>🇯🇵</span> 日本語 </a>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<span>🇨🇳</span> 中文 </a>
</li>
</ul>
</div>
</div>
</div>Support Dropdown Example
Support dropdown menu with links to Documentation, Knowledge Base, and Contact Us with external link indicators
<!-- Support Dropdown -->
<div class="h-72">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-default-main11"
class="dropdown-toggle inline-flex justify-center items-center gap-2 py-2 px-3 text-sm text-black border rounded-md cursor-pointer font-semibold text-center shadow-xs transition-all duration-500">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path
d="M9.23163 9.2148C9.23163 5.59165 14.7684 5.59165 14.7684 9.2148C14.7684 11.8031 12.2525 11.2866 12.2525 14.3913"
stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="my-path">
</path>
<path d="M11.975 17.5026L12.025 17.5026" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>
Support
</button>
<div id="dropdown-default-main11"
class="dropdown-menu rounded-xl shadow-lg bg-white border absolute top-full w-64 open hidden text-base"
aria-labelledby="dropdown-default-main11">
<h4 class="text-sm font-medium px-3 py-2 border-b">Get Help</h4>
<ul class="p-1 text-neutral-600">
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 7C3 5.11438 3 4.17157 3.58579 3.58579C4.17157 3 5.11438 3 7 3H17C18.8856 3 19.8284 3 20.4142 3.58579C21 4.17157 21 5.11438 21 7V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V7Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M8 10C8 9.06812 8 8.60218 8.15224 8.23463C8.35523 7.74458 8.74458 7.35523 9.23463 7.15224C9.60218 7 10.0681 7 11 7H13C13.9319 7 14.3978 7 14.7654 7.15224C15.2554 7.35523 15.6448 7.74458 15.8478 8.23463C16 8.60218 16 9.06812 16 10C16 10.9319 16 11.3978 15.8478 11.7654C15.6448 12.2554 15.2554 12.6448 14.7654 12.8478C14.3978 13 13.9319 13 13 13H11C10.0681 13 9.60218 13 9.23463 12.8478C8.74458 12.6448 8.35523 12.2554 8.15224 11.7654C8 11.3978 8 10.9319 8 10Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M3 19C3 17.8954 3.89543 17 5 17H21C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H5C3.89543 21 3 20.1046 3 19Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
</svg> Documentation </a>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true">
<path d="M15 3h6v6"></path>
<path d="M10 14 21 3"></path>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
</svg>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.5 3H10.5C7.21252 3 5.56878 3 4.46243 3.90796C4.25989 4.07418 4.07418 4.25989 3.90796 4.46243C3 5.56878 3 7.21252 3 10.5V14.6667C3 16.5076 4.49238 18 6.33333 18H6.5C7.32843 18 8 18.6716 8 19.5C8 20.118 8.70557 20.4708 9.2 20.1L11 18.75C11.4623 18.4033 11.6934 18.23 11.9584 18.1296C12.0086 18.1106 12.0595 18.0936 12.111 18.0787C12.3833 18 12.6722 18 13.25 18H13.5C16.7875 18 18.4312 18 19.5376 17.092C19.7401 16.9258 19.9258 16.7401 20.092 16.5376C21 15.4312 21 13.7875 21 10.5C21 7.21252 21 5.56878 20.092 4.46243C19.9258 4.25989 19.7401 4.07418 19.5376 3.90796C18.4312 3 16.7875 3 13.5 3Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path d="M7 8H17" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
<path d="M7 12H12" stroke="#737373" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
</svg> Knowledge Base </a>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true">
<path d="M15 3h6v6"></path>
<path d="M10 14 21 3"></path>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
</svg>
</li>
<li
class="flex items-center justify-between hover:bg-gray-100 transition-all duration-500 px-2 py-1.5">
<a class="flex items-center gap-2 hover:bg-gray-100 font-medium rounded-sm transition-all duration-500"
href="javascript:;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12C3 8.22876 3 6.34315 4.17157 5.17157C5.34315 4 7.22876 4 11 4H13C16.7712 4 18.6569 4 19.8284 5.17157C21 6.34315 21 8.22876 21 12C21 15.7712 21 17.6569 19.8284 18.8284C18.6569 20 16.7712 20 13 20H11C7.22876 20 5.34315 20 4.17157 18.8284C3 17.6569 3 15.7712 3 12Z"
stroke="#737373" stroke-width="2" class="my-path"></path>
<path
d="M3.54883 6.73307L7.76733 9.36198C9.82587 10.6448 10.8551 11.2863 11.9998 11.2861C13.1445 11.2859 14.1736 10.6441 16.2317 9.36063L20.461 6.72314"
stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg> Contact US </a>
</li>
</ul>
</div>
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More