22 Tailwind Dropdown Menus
05 / 22

All 22 in 22 Tailwind Dropdown Menus

  1. 01Tailwind Slide-Down Fade Dropdown Menu
  2. 02Tailwind Clip-Path Curtain Reveal Dropdown
  3. 03Tailwind 3D Perspective Flip Dropdown
  4. 04Tailwind Elastic Bounce Dropdown Menu
  5. 05Tailwind Glassmorphism Float Panel Dropdown
  6. 06Tailwind Stagger Children Reveal Dropdown
  7. 07Tailwind Mega Menu Grid Dropdown
  8. 08Tailwind Underline Nav Fade Panel Dropdown
  9. 09Tailwind Details Summary Native Dropdown
  10. 10Tailwind Checkbox Hack Mobile Nav Dropdown
  11. 11Tailwind Nested Multi-Level Dropdown
  12. 12Tailwind Icon Sidebar Flyout Dropdown
  13. 13Tailwind Split-Screen Mega Menu Dropdown
  14. 14Tailwind Segmented Pill Nav Dropdown
  15. 15Tailwind Color Swatch Picker Dropdown
  16. 16Tailwind Right-Click Context Menu Dropdown
  17. 17Tailwind Keyboard Accessible ARIA Dropdown
  18. 18Tailwind Stagger Blur Entrance Dropdown
  19. 19Tailwind Command Palette Search Dropdown
  20. 20Tailwind Autocomplete Suggestion Dropdown
  21. 21Tailwind Tab Panel Dropdown
  22. 22Tailwind Custom Animated Select Dropdown
Pure TailwindMIT licensed

Tailwind Glassmorphism Float Panel Dropdown

Frosted glass over a vivid gradient, where the port is almost free: backdrop-blur-xl and backdrop-saturate-200 are real utilities, the translucent border is border-white/35, and the layered inner glow is one arbitrary shadow-[…] because a composed inset shadow is not a design-scale value.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tdd-05 relative w-full min-h-svh overflow-hidden bg-linear-[135deg,var(--color-tdd05-g1),var(--color-tdd05-g2)_40%,var(--color-tdd05-g3)] font-tdd05-sans px-5 py-8" aria-label="Glassmorphism float panel dropdown demo">
  <div class="pointer-events-none absolute -top-25 -left-20 size-75 rounded-full bg-tdd05-g3 opacity-50 blur-[60px]" aria-hidden="true"></div>
  <div class="pointer-events-none absolute -bottom-20 right-0 size-62 rounded-full bg-tdd05-g4 opacity-50 blur-[60px]" aria-hidden="true"></div>
  <div class="pointer-events-none absolute top-[40%] left-[40%] size-50 rounded-full bg-tdd05-g5 opacity-50 blur-[60px]" aria-hidden="true"></div>
  <nav class="relative z-10 mx-auto flex w-fit items-center gap-2 rounded-full border border-white/30 bg-white/15 py-2 pr-2 pl-6 backdrop-blur-xl backdrop-saturate-[1.8] shadow-[0_8px_32px_oklch(0_0_0/0.2),inset_0_1px_0_oklch(1_0_0/0.4)]" aria-label="Primary">
    <span class="mr-2 text-lg font-bold tracking-[-0.3px] text-white">Aura</span>
    <div class="flex gap-0.5">
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-3 after:content-['']">
        <a href="#features" class="block rounded-full px-4 py-2 text-sm font-medium text-white/85 no-underline transition-colors duration-200 group-hover:bg-white/20 group-hover:text-white focus-visible:bg-white/20 focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Features &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+12px)] left-1/2 flex min-w-53 -translate-x-1/2 -translate-y-3 flex-col gap-0.5 rounded-2xl border border-white/35 bg-white/18 p-2 opacity-0 backdrop-blur-2xl backdrop-saturate-200 shadow-[0_16px_48px_oklch(0_0_0/0.25),inset_0_1px_0_oklch(1_0_0/0.5)] transition-[opacity,translate] duration-320 ease-tdd05 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#ai" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127775; AI Insights</a>
          <a href="#dashboard" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128202; Live Dashboard</a>
          <a href="#zero-trust" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128274; Zero Trust Security</a>
          <a href="#sync" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#9889; Real-time Sync</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-3 after:content-['']">
        <a href="#pricing" class="block rounded-full px-4 py-2 text-sm font-medium text-white/85 no-underline transition-colors duration-200 group-hover:bg-white/20 group-hover:text-white focus-visible:bg-white/20 focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Pricing &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+12px)] left-1/2 flex min-w-53 -translate-x-1/2 -translate-y-3 flex-col gap-0.5 rounded-2xl border border-white/35 bg-white/18 p-2 opacity-0 backdrop-blur-2xl backdrop-saturate-200 shadow-[0_16px_48px_oklch(0_0_0/0.25),inset_0_1px_0_oklch(1_0_0/0.5)] transition-[opacity,translate] duration-320 ease-tdd05 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#free" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127381; Free Plan</a>
          <a href="#pro" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128640; Pro Plan</a>
          <a href="#enterprise" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127959; Enterprise</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-3 after:content-['']">
        <a href="#about" class="block rounded-full px-4 py-2 text-sm font-medium text-white/85 no-underline transition-colors duration-200 group-hover:bg-white/20 group-hover:text-white focus-visible:bg-white/20 focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">About &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+12px)] left-1/2 flex min-w-53 -translate-x-1/2 -translate-y-3 flex-col gap-0.5 rounded-2xl border border-white/35 bg-white/18 p-2 opacity-0 backdrop-blur-2xl backdrop-saturate-200 shadow-[0_16px_48px_oklch(0_0_0/0.25),inset_0_1px_0_oklch(1_0_0/0.5)] transition-[opacity,translate] duration-320 ease-tdd05 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#team" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128101; Our Team</a>
          <a href="#mission" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127759; Mission</a>
          <a href="#press" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128240; Press Kit</a>
        </div>
      </div>
    </div>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tdd05-g1: #667eea;
  --color-tdd05-g1: oklch(0.63 0.16 275);
  --color-tdd05-g2: #764ba2;
  --color-tdd05-g2: oklch(0.46 0.16 305);
  --color-tdd05-g3: #f093fb;
  --color-tdd05-g3: oklch(0.76 0.19 325);
  --color-tdd05-g4: #4facfe;
  --color-tdd05-g4: oklch(0.72 0.15 240);
  --color-tdd05-g5: #f5af19;
  --color-tdd05-g5: oklch(0.79 0.16 75);
  --font-tdd05-sans: 'Outfit', system-ui, sans-serif;
  --ease-tdd05: cubic-bezier(0.16, 1, 0.3, 1);
}

.tdd-05 {
  width: 100%;
  min-height: 100svh;
}

.tdd-05 ::selection {
  background: oklch(1 0 0 / 0.4);
  color: #fff;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tdd05-g1: #667eea;
  --color-tdd05-g1: oklch(0.63 0.16 275);
  --color-tdd05-g2: #764ba2;
  --color-tdd05-g2: oklch(0.46 0.16 305);
  --color-tdd05-g3: #f093fb;
  --color-tdd05-g3: oklch(0.76 0.19 325);
  --color-tdd05-g4: #4facfe;
  --color-tdd05-g4: oklch(0.72 0.15 240);
  --color-tdd05-g5: #f5af19;
  --color-tdd05-g5: oklch(0.79 0.16 75);
  --font-tdd05-sans: 'Outfit', system-ui, sans-serif;
  --ease-tdd05: cubic-bezier(0.16, 1, 0.3, 1);
}

.tdd-05 {
  width: 100%;
  min-height: 100svh;
}

.tdd-05 ::selection {
  background: oklch(1 0 0 / 0.4);
  color: #fff;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Glass is the one recipe Tailwind covers end to end: background alpha, backdrop blur, backdrop saturate and border alpha are all utilities, so the port deletes the entire CSS block.
  • The layered box-shadow stays arbitrary — a composed depth-plus-inset-glow pair is a one-off, not a scale value.
  • Alpha colour uses the slash syntax (bg-white/18) rather than a token per opacity level, which is what keeps the glass tunable without touching @theme.
  • The three orbs are plain absolutely-positioned divs with blur-[60px]; the CSS version needed three modifier classes for the same thing.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Glassmorphism Float Panel Dropdown
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-glassmorphism-float-panel-dropdown/

Frosted glass over a vivid gradient, where the port is almost free: backdrop-blur-xl and backdrop-saturate-200 are real utilities, the translucent border is border-white/35, and the layered inner glow is one arbitrary shadow-[…] because a composed inset shadow is not a design-scale value.
## HTML
```html
<section class="tdd-05 relative w-full min-h-svh overflow-hidden bg-linear-[135deg,var(--color-tdd05-g1),var(--color-tdd05-g2)_40%,var(--color-tdd05-g3)] font-tdd05-sans px-5 py-8" aria-label="Glassmorphism float panel dropdown demo">
  <div class="pointer-events-none absolute -top-25 -left-20 size-75 rounded-full bg-tdd05-g3 opacity-50 blur-[60px]" aria-hidden="true"></div>
  <div class="pointer-events-none absolute -bottom-20 right-0 size-62 rounded-full bg-tdd05-g4 opacity-50 blur-[60px]" aria-hidden="true"></div>
  <div class="pointer-events-none absolute top-[40%] left-[40%] size-50 rounded-full bg-tdd05-g5 opacity-50 blur-[60px]" aria-hidden="true"></div>
  <nav class="relative z-10 mx-auto flex w-fit items-center gap-2 rounded-full border border-white/30 bg-white/15 py-2 pr-2 pl-6 backdrop-blur-xl backdrop-saturate-[1.8] shadow-[0_8px_32px_oklch(0_0_0/0.2),inset_0_1px_0_oklch(1_0_0/0.4)]" aria-label="Primary">
    <span class="mr-2 text-lg font-bold tracking-[-0.3px] text-white">Aura</span>
    <div class="flex gap-0.5">
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-3 after:content-['']">
        <a href="#features" class="block rounded-full px-4 py-2 text-sm font-medium text-white/85 no-underline transition-colors duration-200 group-hover:bg-white/20 group-hover:text-white focus-visible:bg-white/20 focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Features &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+12px)] left-1/2 flex min-w-53 -translate-x-1/2 -translate-y-3 flex-col gap-0.5 rounded-2xl border border-white/35 bg-white/18 p-2 opacity-0 backdrop-blur-2xl backdrop-saturate-200 shadow-[0_16px_48px_oklch(0_0_0/0.25),inset_0_1px_0_oklch(1_0_0/0.5)] transition-[opacity,translate] duration-320 ease-tdd05 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#ai" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127775; AI Insights</a>
          <a href="#dashboard" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128202; Live Dashboard</a>
          <a href="#zero-trust" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128274; Zero Trust Security</a>
          <a href="#sync" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#9889; Real-time Sync</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-3 after:content-['']">
        <a href="#pricing" class="block rounded-full px-4 py-2 text-sm font-medium text-white/85 no-underline transition-colors duration-200 group-hover:bg-white/20 group-hover:text-white focus-visible:bg-white/20 focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Pricing &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+12px)] left-1/2 flex min-w-53 -translate-x-1/2 -translate-y-3 flex-col gap-0.5 rounded-2xl border border-white/35 bg-white/18 p-2 opacity-0 backdrop-blur-2xl backdrop-saturate-200 shadow-[0_16px_48px_oklch(0_0_0/0.25),inset_0_1px_0_oklch(1_0_0/0.5)] transition-[opacity,translate] duration-320 ease-tdd05 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#free" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127381; Free Plan</a>
          <a href="#pro" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128640; Pro Plan</a>
          <a href="#enterprise" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127959; Enterprise</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-3 after:content-['']">
        <a href="#about" class="block rounded-full px-4 py-2 text-sm font-medium text-white/85 no-underline transition-colors duration-200 group-hover:bg-white/20 group-hover:text-white focus-visible:bg-white/20 focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">About &#9662;</a>
        <div class="pointer-events-none absolute top-[calc(100%+12px)] left-1/2 flex min-w-53 -translate-x-1/2 -translate-y-3 flex-col gap-0.5 rounded-2xl border border-white/35 bg-white/18 p-2 opacity-0 backdrop-blur-2xl backdrop-saturate-200 shadow-[0_16px_48px_oklch(0_0_0/0.25),inset_0_1px_0_oklch(1_0_0/0.5)] transition-[opacity,translate] duration-320 ease-tdd05 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100 motion-reduce:duration-150">
          <a href="#team" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128101; Our Team</a>
          <a href="#mission" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#127759; Mission</a>
          <a href="#press" class="block rounded-[10px] px-3.5 py-2.5 text-[13.5px] font-medium text-white/90 no-underline transition-colors duration-150 hover:bg-white/20 hover:text-white focus-visible:bg-white/20 focus-visible:outline-none">&#128240; Press Kit</a>
        </div>
      </div>
    </div>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd05-g1: #667eea;
  --color-tdd05-g1: oklch(0.63 0.16 275);
  --color-tdd05-g2: #764ba2;
  --color-tdd05-g2: oklch(0.46 0.16 305);
  --color-tdd05-g3: #f093fb;
  --color-tdd05-g3: oklch(0.76 0.19 325);
  --color-tdd05-g4: #4facfe;
  --color-tdd05-g4: oklch(0.72 0.15 240);
  --color-tdd05-g5: #f5af19;
  --color-tdd05-g5: oklch(0.79 0.16 75);
  --font-tdd05-sans: 'Outfit', system-ui, sans-serif;
  --ease-tdd05: cubic-bezier(0.16, 1, 0.3, 1);
}

.tdd-05 {
  width: 100%;
  min-height: 100svh;
}

.tdd-05 ::selection {
  background: oklch(1 0 0 / 0.4);
  color: #fff;
}
```

How this works

Glass is three properties. A translucent background, a backdrop blur with saturation boost, and a light border. Tailwind ships all three, so the CSS file holds only the tokens and the orb geometry.

class="bg-white/18 backdrop-blur-2xl backdrop-saturate-200 border border-white/35"

The orbs are the point. backdrop-filter blurs only what is painted behind the element, so a glass panel over a flat colour looks like a flat colour. Three blur-[60px] circles give the filter something to work with.

Contrast is a real constraint here. Link text is text-white/90 on a dark-ish gradient, and hover lifts it to full white plus a bg-white/20 plate — never lower than that, because alpha text on a photographic ground is the classic glass accessibility failure.

Make it yours

  • Frost depth: backdrop-blur-xl → backdrop-blur-3xl.
  • Tint: swap bg-white/18 for bg-tdd05-acc/20 to colour the glass.
  • Dark glass: bg-black/30 border-white/10 is the dark-UI variant of the same recipe.
  • Cheaper mobile: add max-sm:backdrop-blur-md — large blur radii are expensive during scroll.

Gotchas — read before shipping

  • backdrop-filter only affects what is behind the element in the same stacking context; siblings at the same level are not blurred.
  • A parent with overflow-hidden plus backdrop-blur can force an extra compositing layer and cost frames on mobile Safari.
  • Glass panels fail contrast easily. Keep body text at full opacity and reserve alpha for surfaces, not ink.
  • Firefox only shipped backdrop-filter in 103 — older versions render the panel as a flat translucent plate, which is an acceptable degradation but check it.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is Baseline 2024 (Firefox 103, Safari 9 prefixed); Tailwind emits the -webkit- prefix for you.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →