Dropdown Menu Component
Create a positioned dropdown menu that appears below a trigger button using absolute positioning, shadow, and rounded corners.
Dropdown Menu Component is a free Tailwind CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is a Dropdown Menu
A dropdown menu is a panel of options that appears below (or beside) a trigger element when activated. Unlike a native <select>, a custom dropdown can contain icons, descriptions, badges, dividers, and any other HTML content.
The key challenge with dropdowns is positioning: the panel must appear directly below the trigger and stay within the viewport. Tailwind's positioning utilities combined with a small amount of JavaScript make this achievable without any external library.
Trigger Button Structure
The dropdown trigger is usually a button that shows the currently selected option or an action label. Wrap the trigger and the dropdown panel together in a relative container so the panel positions itself relative to the trigger.
The trigger button uses inline-flex items-center gap-2 to align a label and a chevron icon. The chevron can rotate with rotate-180 when the dropdown is open to indicate state.
<div class="relative inline-block">
<button
id="dd-trigger"
onclick="toggleDropdown()"
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
text-gray-700 bg-white border border-gray-300 rounded-lg
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
Options
<svg id="dd-chevron" class="w-4 h-4 transition-transform duration-200"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
</div>Dropdown Panel Positioning
The dropdown panel uses absolute top-full left-0 mt-1 to position it directly below the trigger button. top-full places the top of the panel at the bottom edge of the relative parent, and mt-1 adds a small 4px gap between the trigger and the panel.
Add min-w-48 w-56 to give the panel a comfortable minimum width regardless of the trigger's size. If the dropdown could be cut off on the right edge, use right-0 instead of left-0 to align it to the right edge of the trigger.
<div
id="dropdown"
class="absolute top-full left-0 mt-1 z-50
w-56 bg-white border border-gray-200 rounded-xl shadow-lg
hidden">
<!-- menu items -->
</div>Dropdown Menu Items
Each menu item is a full-width anchor or button with flex items-center gap-3 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 for a comfortable hover target. The first item uses rounded-t-xl and the last uses rounded-b-xl to clip hover highlights within the panel's rounded corners.
Alternatively, add rounded-xl to each item individually with a 4px inset margin from the panel padding to create a floating highlight effect.
<div class="py-1">
<a href="/profile"
class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
View Profile
</a>
<a href="/settings"
class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
Settings
</a>
</div>Dividers and Section Groups
Dividers separate groups of related items within a dropdown. Use an <hr class='border-t border-gray-100 my-1'> element between groups. Alternatively, add a small section heading above each group using px-4 py-1 text-xs font-semibold uppercase tracking-wider text-gray-400.
Group dangerous actions (like logout or delete) at the bottom, below a divider, and color them red to make it immediately clear they are destructive.
<div class="py-1">
<!-- Main section -->
<a href="/profile" class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">View Profile</a>
<a href="/settings" class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
<!-- Divider -->
<hr class="border-t border-gray-100 my-1" />
<!-- Danger section -->
<button class="flex items-center gap-3 w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
</svg>
Sign Out
</button>
</div>Toggle Logic and Close on Outside Click
The dropdown's toggle logic shows and hides the panel. More importantly, it must close when the user clicks outside the dropdown. Add a click listener to the document that checks if the click target is not inside the dropdown container.
Use contains() to check if the click happened within the dropdown wrapper element. If not, hide the dropdown and rotate the chevron back.
<script>
const wrapper = document.getElementById('dd-wrapper');
const panel = document.getElementById('dropdown');
const chevron = document.getElementById('dd-chevron');
function toggleDropdown() {
panel.classList.toggle('hidden');
chevron.classList.toggle('rotate-180');
}
// Close when clicking outside
document.addEventListener('click', (e) => {
if (!wrapper.contains(e.target)) {
panel.classList.add('hidden');
chevron.classList.remove('rotate-180');
}
});
// Close on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
panel.classList.add('hidden');
chevron.classList.remove('rotate-180');
}
});
</script>Dropdown With Fade Animation
Add a fade and scale entrance animation to the dropdown panel by using the same technique as the modal: transition from scale-95 opacity-0 to scale-100 opacity-100 with transition-all duration-150 origin-top.
The origin-top utility sets the transform origin to the top of the panel so it scales outward from the trigger, making the animation feel connected to the button that opened it.
<div
id="dropdown"
class="absolute top-full left-0 mt-1 z-50
w-56 bg-white border border-gray-200 rounded-xl shadow-lg
transition-all duration-150 origin-top
scale-95 opacity-0 pointer-events-none">
<!-- items -->
</div>
<script>
function openDropdown() {
const d = document.getElementById('dropdown');
d.classList.remove('scale-95', 'opacity-0', 'pointer-events-none');
d.classList.add('scale-100', 'opacity-100', 'pointer-events-auto');
}
function closeDropdown() {
const d = document.getElementById('dropdown');
d.classList.remove('scale-100', 'opacity-100', 'pointer-events-auto');
d.classList.add('scale-95', 'opacity-0', 'pointer-events-none');
}
</script>Right-Aligned Dropdown
When a dropdown trigger is near the right edge of the screen (like a user avatar in the top-right of a navbar), the panel should align to the right edge of the trigger to avoid overflowing off-screen. Use right-0 instead of left-0 on the panel.
This is a critical detail that beginners often miss — a left-aligned dropdown on a right-side trigger will appear partially or fully off-screen on mobile devices.
<div class="relative inline-block">
<!-- Right-side trigger (e.g., user avatar) -->
<button onclick="toggleDropdown()" class="w-8 h-8 rounded-full bg-blue-600 text-white text-sm font-bold">JD</button>
<!-- Panel aligned to right edge of trigger -->
<div
id="dropdown"
class="hidden absolute top-full right-0 mt-1 z-50
w-56 bg-white border border-gray-200 rounded-xl shadow-lg py-1">
<div class="px-4 py-2 border-b border-gray-100">
<p class="text-sm font-semibold text-gray-900">Jane Doe</p>
<p class="text-xs text-gray-500">jane@example.com</p>
</div>
<a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
<a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
<hr class="border-t border-gray-100 my-1" />
<button class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">Sign Out</button>
</div>
</div>Dropdown With Checkmarks for Active Items
A selection dropdown shows a checkmark next to the currently selected option. Use flex items-center justify-between on each item to place the checkmark on the right, or flex items-center gap-3 to put it on the left before the label.
Color the active item with text-blue-600 font-semibold and show a colored checkmark icon. Inactive items use the standard text-gray-700.
<div class="py-1">
<!-- Active item -->
<button class="flex items-center justify-between w-full px-4 py-2 text-sm font-semibold text-blue-600 hover:bg-blue-50">
English
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
</svg>
</button>
<!-- Inactive items -->
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">French</button>
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">German</button>
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Japanese</button>
</div>Context Menu Dropdown
A context menu appears on right-click or at a three-dot button's location to offer contextual actions for a specific item (like a file, row, or card). Position it at the clicked coordinates using absolute positioning and JavaScript.
For the three-dot pattern (the most common approach), place a relative container on the item, and a three-dot button at top-2 right-2. The dropdown panel appears below or beside the button.
<div class="relative">
<!-- Item row -->
<div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200">
<span class="text-sm font-medium text-gray-900">Project Alpha.zip</span>
<!-- Three-dot button -->
<div class="relative">
<button onclick="toggleCtx()" class="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/>
</svg>
</button>
<div id="ctx-menu" class="hidden absolute top-full right-0 mt-1 z-50 w-40 bg-white border border-gray-200 rounded-xl shadow-lg py-1">
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Rename</button>
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Download</button>
<hr class="border-t border-gray-100 my-1" />
<button class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">Delete</button>
</div>
</div>
</div>
</div>Nested (Sub-Menu) Dropdown
A nested submenu appears to the right of a parent menu item when it is hovered or clicked. Use group relative on the parent item and group-hover:block absolute left-full top-0 on the submenu panel to position it beside the parent item.
Add a right-pointing chevron icon on the parent item to signal that it has a submenu. Nested menus should be limited to one level — two-level nesting is already complex; three levels is rarely justified.
<div class="py-1 relative">
<a href="/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
<!-- Parent with submenu -->
<div class="group relative">
<button class="flex items-center justify-between w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
Export
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</button>
<!-- Submenu -->
<div class="hidden group-hover:block absolute left-full top-0 ml-1 w-40 bg-white border border-gray-200 rounded-xl shadow-lg py-1 z-50">
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">As PDF</button>
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">As CSV</button>
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">As Excel</button>
</div>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: dropdown positioning uses relative on the wrapper and absolute top-full left-0 mt-1 on the panel; right-side alignment uses right-0 instead of left-0 to prevent overflow on right-side triggers; and outside-click dismissal requires a document click listener that checks contains() to detect clicks outside the wrapper element. Next up we make modals and dropdowns fully accessible.
Frequently asked questions
Is the “Dropdown Menu Component” lesson free?
Yes — the full text of “Dropdown Menu Component” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Dropdown Menu Component”?
Create a positioned dropdown menu that appears below a trigger button using absolute positioning, shadow, and rounded corners. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Dropdown Menu Component” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Modal Dialog Structure
- Modal Open and Close Animation
- Dropdown Menu Component
- Accessible Modals and Dropdowns