Dropdown Placement using Tailwind UI Component
Dropdown placement in Tailwind CSS allows you to position dropdown menus above, below, to the right, or to the left of their parent elements or trigger points.
dropdown
Loading component...
146 lines
<div class="container w-full mx-auto items-center py-56 bg-gray-200">
<div class="flex flex-col flex-wrap md:flex-row items-center mx-auto md:gap-x-10 gap-y-10 justify-center">
<div class="relative ">
<button
class="px-5 py-2.5 bg-green-500 text-white font-medium rounded-md hover:bg-green-600 focus:bg-green-700 focus:outline-none inline-flex items-center"
id="dropdownButtonTop">
<span class="mr-2.5">Dropdown Top</span>
<svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5 5 1 1 5" />
</svg>
</button>
<ul class="absolute z-10 hidden mt-2 py-1 w-full bg-white text-sm rounded-md shadow-lg bottom-12 left-0"
id="dropdownTop">
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Another action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Something else here</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Separated link</a>
</li>
</ul>
</div>
<div class="relative">
<button
class="px-5 py-2.5 bg-green-500 text-white font-medium rounded-md hover:bg-green-600 focus:bg-green-700 focus:outline-none inline-flex items-center"
id="dropdownButtonRight">
<span class="mr-2.5">Dropdown Right</span>
<svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 9 4-4-4-4" />
</svg>
</button>
<ul
class="absolute z-10 hidden mt-2 py-1 w-full bg-white text-sm rounded-md shadow-lg left-52 top-1/2 transform -translate-y-1/2"
id="dropdownRight">
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Another action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Something else here</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Separated link</a>
</li>
</ul>
</div>
<div class="relative">
<button
class="px-5 py-2.5 bg-green-500 text-white font-medium rounded-md hover:bg-green-600 focus:bg-green-700 focus:outline-none inline-flex items-center"
id="dropdownButtonBottom">
<span class="mr-2.5">Dropdown Bottom</span>
<svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 4 4 4-4" />
</svg>
</button>
<ul class="absolute z-10 hidden mt-2 py-1 w-full bg-white text-sm rounded-md shadow-lg top-12 left-0"
id="dropdownBottom">
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Another action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Something else here</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Separated link</a>
</li>
</ul>
</div>
<div class="relative">
<button
class="px-5 py-2.5 bg-green-500 text-white font-medium rounded-md hover:bg-green-600 focus:bg-green-700 focus:outline-none inline-flex items-center"
id="dropdownButtonLeft">
<svg class="w-2.5 h-2.5 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 1 1 5l4 4" />
</svg>
<span class="ml-2.5">Dropdown Left</span>
</button>
<ul
class="absolute z-10 hidden mt-2 py-1 w-full bg-white text-sm rounded-md shadow-lg right-48 top-1/2 transform -translate-y-1/2"
id="dropdownLeft">
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Another action</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Something else here</a>
</li>
<li>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
<script>
function toggleDropdown(dropdownButton, dropdownList) {
dropdownList.classList.toggle('hidden');
}
function hideDropdown(dropdownButton, dropdownList) {
dropdownList.classList.add('hidden');
}
function setupDropdown(buttonId, listId) {
const dropdownButton = document.getElementById(buttonId);
const dropdownList = document.getElementById(listId);
dropdownButton.addEventListener('click', () => {
toggleDropdown(dropdownButton, dropdownList);
});
window.addEventListener('click', (event) => {
if (!dropdownButton.contains(event.target)) {
hideDropdown(dropdownButton, dropdownList);
}
});
}
setupDropdown('dropdownButtonTop', 'dropdownTop');
setupDropdown('dropdownButtonBottom', 'dropdownBottom');
setupDropdown('dropdownButtonRight', 'dropdownRight');
setupDropdown('dropdownButtonLeft', 'dropdownLeft');
</script>