Tailwind CSS cookbook · Intermediate
Build a dropdown menu
Open a small menu of actions from a button, positioned below it and above other content.
Approach
Position the menu absolutely inside a relative wrapper. The native popover attribute puts it in the top layer
(above everything, closes on Escape and outside clicks) with popovertarget on the button.
Solution
<div class="h-56 p-6">
<button popovertarget="actions" class="rounded-lg bg-white px-4 py-2 font-medium ring-1 ring-slate-300 hover:bg-slate-50">Options ▾</button>
<div id="actions" popover class="m-0 mt-2 w-44 rounded-xl bg-white p-1 shadow-lg ring-1 ring-slate-200 [position-area:bottom_span-right]">
<a href="#" class="block rounded-lg px-3 py-2 text-sm hover:bg-slate-100">Edit</a>
<a href="#" class="block rounded-lg px-3 py-2 text-sm hover:bg-slate-100">Duplicate</a>
<a href="#" class="block rounded-lg px-3 py-2 text-sm text-rose-600 hover:bg-rose-50">Delete</a>
</div>
</div>
Pitfalls
- Menus clipped by a parent's
overflow-hidden, or hidden behind other sections because of stacking contexts; the top layer avoids both. - Anchor positioning (
position-area) is new; check browser support or position with JavaScript (Floating UI).
Variations
- In React, use Headless UI's Menu or Radix DropdownMenu for full keyboard navigation.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/position