3 Tailwind3 with JSPublished 2026-10-04Free · no sign-up
Six dropdowns in Tailwind: an action menu with arrow-key support, a navbar submenu on hover and focus, an account menu, a no-JavaScript popover menu, a mega menu panel and a split Save button.
A menu button with a list of actions styled in Tailwind and wired with the ARIA menu pattern: arrow keys move between items, Escape closes and returns focus to the button, and the destructive Delete item is separated and coloured red.
const tb = document.getElementById('twm-b'), tm = document.getElementById('twm-m'), ti = [...tm.querySelectorAll('[role=menuitem]')];
function set(o) { tm.hidden = !o; tb.setAttribute('aria-expanded', String(o)); if (o) ti[0].focus(); }
tb.addEventListener('click', () => set(tm.hidden));
tm.addEventListener('keydown', e => {
const i = ti.indexOf(document.activeElement);
if (e.key === 'ArrowDown') { e.preventDefault(); ti[(i + 1) % ti.length].focus(); }
if (e.key === 'ArrowUp') { e.preventDefault(); ti[(i - 1 + ti.length) % ti.length].focus(); }
if (e.key === 'Escape') { set(false); tb.focus(); }
});
ti.forEach(x => x.addEventListener('click', () => { set(false); tb.focus(); }));
document.addEventListener('click', e => { if (!e.target.closest('#twm')) { tm.hidden = true; tb.setAttribute('aria-expanded', 'false'); } });
02. Tailwind Nav Dropdown
TailwindNavigation
A navbar item that reveals a submenu on hover and whenever anything inside has focus, using group-hover: and group-focus-within: with invisible and opacity utilities. A small transition delay keeps it open while the pointer moves into the menu.
An avatar button that opens the account panel with name, email, links and a sign-out action. The panel is toggled with aria-expanded, closes on Escape and outside click, and the avatar's accessible name includes the person's name.
const ab = document.querySelector('#twac > button'), ap = document.getElementById('twac-p');
function set(o) { ap.hidden = !o; ab.setAttribute('aria-expanded', String(o)); }
ab.addEventListener('click', () => set(ap.hidden));
document.addEventListener('keydown', e => { if (e.key === 'Escape' && !ap.hidden) { set(false); ab.focus(); } });
document.addEventListener('click', e => { if (!e.target.closest('#twac')) set(false); });
set(true);
04. Tailwind Popover Dropdown
TailwindPopover
A share dropdown using the native popover attribute for opening, light dismiss and Escape, styled only with Tailwind classes. It needs no JavaScript at all, which makes it a good default for simple menus of links.
A wide dropdown panel with two link columns and a promotional tile, toggled by a disclosure button. grid-cols-1 on phones grows to three columns from the sm breakpoint, and the panel uses ring and shadow utilities for depth.
A Save button with a joined arrow button that opens extra save options. Both halves sit in one wrapper with overflow-hidden and rounded corners, so they read as a single control, and each half is its own button with a descriptive accessible name.
const sa = document.querySelector('[aria-controls=twsp-m]'), smn = document.getElementById('twsp-m');
sa.addEventListener('click', () => { const o = smn.hidden; smn.hidden = !o; sa.setAttribute('aria-expanded', String(o)); if (o) smn.querySelector('button').focus(); });
document.addEventListener('keydown', e => { if (e.key === 'Escape' && !smn.hidden) { smn.hidden = true; sa.setAttribute('aria-expanded', 'false'); sa.focus(); } });
About these Tailwind Dropdown Menus
Hover and focus together
The nav dropdown uses group-hover:visible and group-focus-within:visible, so keyboard users can open it by tabbing in. An invisible before: bridge stops it closing in the gap below the link.
Visibility, not display
Using invisible and opacity utilities lets the menu fade, and invisible elements cannot be focused, so hidden links stay out of the Tab order.
Popover without script
The popover attribute handles opening, closing on Escape and outside clicks. Tailwind's backdrop: variant can style its backdrop.
Menus for actions
The ARIA menu pattern suits application actions; for site navigation a simple disclosure with links, like the mega menu, is easier to use.
Frequently asked questions
Which demos use JavaScript?
The action menu, account menu and split button. The nav dropdown and popover are pure HTML and Tailwind.
How do I position menus near their button?
Use a relative wrapper with an absolutely positioned list, or CSS anchor positioning for popovers.