22 Tailwind Dropdown Menus
06 / 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 Stagger Children Reveal Dropdown

Links that cascade in one by one. The CSS version writes an nth-child rule per item; Tailwind cannot, because variant values must be static classes. The idiomatic answer is the per-item index pattern — each link carries style="--i:2" and one shared utility reads it, so adding a sixth link means copying a line and incrementing a number.

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-06 w-full min-h-svh grid justify-center content-start bg-linear-[135deg,var(--color-tdd06-bg1),var(--color-tdd06-bg2)_50%,var(--color-tdd06-bg3)] font-tdd06-sans text-tdd06-ink px-5 py-8" aria-label="Staggered children reveal dropdown demo">
  <nav class="relative z-10 flex items-center gap-1 rounded-2xl border border-tdd06-edge bg-white py-2.5 pr-2.5 pl-5 shadow-[0_4px_20px_oklch(0_0_0/0.06)]" aria-label="Primary">
    <span class="mr-3 text-[17px] font-extrabold tracking-[-0.3px] text-tdd06-acc">&#9670; Flow</span>
    <div class="flex gap-0.5">
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#products" class="flex items-center gap-1.5 rounded-[10px] px-3.5 py-2 text-sm font-semibold text-tdd06-ink no-underline transition-colors duration-150 group-hover:bg-tdd06-tint group-hover:text-tdd06-acc focus-visible:bg-tdd06-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd06-acc"><span>Products</span><span class="text-xs text-tdd06-mut transition-transform duration-200 group-hover:rotate-180 group-hover:text-tdd06-acc group-focus-within:rotate-180" aria-hidden="true">&#9662;</span></a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-50 -translate-x-1/2 flex-col gap-0.5 rounded-2xl border border-tdd06-edge bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0_0_0/0.1)] transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
          <a href="#tokens" style="--i:0;--c:#6366f1" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Design Tokens</a>
          <a href="#kit" style="--i:1;--c:#ec4899" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Component Kit</a>
          <a href="#icons" style="--i:2;--c:#f59e0b" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Icon Library</a>
          <a href="#figma" style="--i:3;--c:#10b981" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Figma Plugin</a>
          <a href="#cli" style="--i:4;--c:#3b82f6" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>CLI Tools</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#use-cases" class="flex items-center gap-1.5 rounded-[10px] px-3.5 py-2 text-sm font-semibold text-tdd06-ink no-underline transition-colors duration-150 group-hover:bg-tdd06-tint group-hover:text-tdd06-acc focus-visible:bg-tdd06-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd06-acc"><span>Use Cases</span><span class="text-xs text-tdd06-mut transition-transform duration-200 group-hover:rotate-180 group-hover:text-tdd06-acc group-focus-within:rotate-180" aria-hidden="true">&#9662;</span></a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-50 -translate-x-1/2 flex-col gap-0.5 rounded-2xl border border-tdd06-edge bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0_0_0/0.1)] transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
          <a href="#startups" style="--i:0;--c:#8b5cf6" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Startups</a>
          <a href="#agencies" style="--i:1;--c:#06b6d4" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Agencies</a>
          <a href="#freelancers" style="--i:2;--c:#f97316" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Freelancers</a>
          <a href="#enterprise" style="--i:3;--c:#14b8a6" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Enterprise</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#company" class="flex items-center gap-1.5 rounded-[10px] px-3.5 py-2 text-sm font-semibold text-tdd06-ink no-underline transition-colors duration-150 group-hover:bg-tdd06-tint group-hover:text-tdd06-acc focus-visible:bg-tdd06-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd06-acc"><span>Company</span><span class="text-xs text-tdd06-mut transition-transform duration-200 group-hover:rotate-180 group-hover:text-tdd06-acc group-focus-within:rotate-180" aria-hidden="true">&#9662;</span></a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-50 -translate-x-1/2 flex-col gap-0.5 rounded-2xl border border-tdd06-edge bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0_0_0/0.1)] transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
          <a href="#about" style="--i:0;--c:#ef4444" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>About</a>
          <a href="#blog" style="--i:1;--c:#a855f7" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Blog</a>
          <a href="#careers" style="--i:2;--c:#0ea5e9" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Careers</a>
        </div>
      </div>
    </div>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tdd06-bg1: #f0fdf4;
  --color-tdd06-bg1: oklch(0.98 0.02 150);
  --color-tdd06-bg2: #ecfdf5;
  --color-tdd06-bg2: oklch(0.98 0.02 165);
  --color-tdd06-bg3: #f0f9ff;
  --color-tdd06-bg3: oklch(0.98 0.02 230);
  --color-tdd06-ink: #1e293b;
  --color-tdd06-ink: oklch(0.28 0.03 260);
  --color-tdd06-mut: #94a3b8;
  --color-tdd06-mut: oklch(0.7 0.03 255);
  --color-tdd06-edge: #e2e8f0;
  --color-tdd06-edge: oklch(0.92 0.01 255);
  --color-tdd06-tint: #eef2ff;
  --color-tdd06-tint: oklch(0.96 0.02 275);
  --color-tdd06-hover: #f8fafc;
  --color-tdd06-hover: oklch(0.98 0.005 255);
  --color-tdd06-acc: #6366f1;
  --color-tdd06-acc: oklch(0.59 0.2 278);
  --font-tdd06-sans: 'Nunito', system-ui, sans-serif;
  --ease-tdd06: cubic-bezier(0.16, 1, 0.3, 1);
}

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

.tdd-06 ::selection {
  background: var(--color-tdd06-acc);
  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-tdd06-bg1: #f0fdf4;
  --color-tdd06-bg1: oklch(0.98 0.02 150);
  --color-tdd06-bg2: #ecfdf5;
  --color-tdd06-bg2: oklch(0.98 0.02 165);
  --color-tdd06-bg3: #f0f9ff;
  --color-tdd06-bg3: oklch(0.98 0.02 230);
  --color-tdd06-ink: #1e293b;
  --color-tdd06-ink: oklch(0.28 0.03 260);
  --color-tdd06-mut: #94a3b8;
  --color-tdd06-mut: oklch(0.7 0.03 255);
  --color-tdd06-edge: #e2e8f0;
  --color-tdd06-edge: oklch(0.92 0.01 255);
  --color-tdd06-tint: #eef2ff;
  --color-tdd06-tint: oklch(0.96 0.02 275);
  --color-tdd06-hover: #f8fafc;
  --color-tdd06-hover: oklch(0.98 0.005 255);
  --color-tdd06-acc: #6366f1;
  --color-tdd06-acc: oklch(0.59 0.2 278);
  --font-tdd06-sans: 'Nunito', system-ui, sans-serif;
  --ease-tdd06: cubic-bezier(0.16, 1, 0.3, 1);
}

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

.tdd-06 ::selection {
  background: var(--color-tdd06-acc);
  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=Nunito:wght@400;600;700;800&display=swap">

What changed in the port

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

  • The whole point of the port: five nth-child delay rules become one utility that reads an index off the element. The stagger is now visible where it applies.
  • Swapping the original's animation for a transition fixes a real bug — CSS animations restart on every hover re-entry, transitions interpolate from the current value.
  • --c proves the other half of the rule: per-item colours are NOT design-scale values, so they stay inline custom properties rather than becoming eight theme tokens.
  • The delay only exists inside group-hover:, so closing is instant — a staggered close reads as lag, not polish.
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 Stagger Children Reveal Dropdown
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-stagger-children-reveal-dropdown/

Links that cascade in one by one. The CSS version writes an nth-child rule per item; Tailwind cannot, because variant values must be static classes. The idiomatic answer is the per-item index pattern — each link carries style="--i:2" and one shared utility reads it, so adding a sixth link means copying a line and incrementing a number.
## HTML
```html
<section class="tdd-06 w-full min-h-svh grid justify-center content-start bg-linear-[135deg,var(--color-tdd06-bg1),var(--color-tdd06-bg2)_50%,var(--color-tdd06-bg3)] font-tdd06-sans text-tdd06-ink px-5 py-8" aria-label="Staggered children reveal dropdown demo">
  <nav class="relative z-10 flex items-center gap-1 rounded-2xl border border-tdd06-edge bg-white py-2.5 pr-2.5 pl-5 shadow-[0_4px_20px_oklch(0_0_0/0.06)]" aria-label="Primary">
    <span class="mr-3 text-[17px] font-extrabold tracking-[-0.3px] text-tdd06-acc">&#9670; Flow</span>
    <div class="flex gap-0.5">
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#products" class="flex items-center gap-1.5 rounded-[10px] px-3.5 py-2 text-sm font-semibold text-tdd06-ink no-underline transition-colors duration-150 group-hover:bg-tdd06-tint group-hover:text-tdd06-acc focus-visible:bg-tdd06-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd06-acc"><span>Products</span><span class="text-xs text-tdd06-mut transition-transform duration-200 group-hover:rotate-180 group-hover:text-tdd06-acc group-focus-within:rotate-180" aria-hidden="true">&#9662;</span></a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-50 -translate-x-1/2 flex-col gap-0.5 rounded-2xl border border-tdd06-edge bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0_0_0/0.1)] transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
          <a href="#tokens" style="--i:0;--c:#6366f1" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Design Tokens</a>
          <a href="#kit" style="--i:1;--c:#ec4899" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Component Kit</a>
          <a href="#icons" style="--i:2;--c:#f59e0b" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Icon Library</a>
          <a href="#figma" style="--i:3;--c:#10b981" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Figma Plugin</a>
          <a href="#cli" style="--i:4;--c:#3b82f6" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>CLI Tools</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#use-cases" class="flex items-center gap-1.5 rounded-[10px] px-3.5 py-2 text-sm font-semibold text-tdd06-ink no-underline transition-colors duration-150 group-hover:bg-tdd06-tint group-hover:text-tdd06-acc focus-visible:bg-tdd06-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd06-acc"><span>Use Cases</span><span class="text-xs text-tdd06-mut transition-transform duration-200 group-hover:rotate-180 group-hover:text-tdd06-acc group-focus-within:rotate-180" aria-hidden="true">&#9662;</span></a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-50 -translate-x-1/2 flex-col gap-0.5 rounded-2xl border border-tdd06-edge bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0_0_0/0.1)] transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
          <a href="#startups" style="--i:0;--c:#8b5cf6" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Startups</a>
          <a href="#agencies" style="--i:1;--c:#06b6d4" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Agencies</a>
          <a href="#freelancers" style="--i:2;--c:#f97316" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Freelancers</a>
          <a href="#enterprise" style="--i:3;--c:#14b8a6" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Enterprise</a>
        </div>
      </div>
      <div class="group relative after:absolute after:inset-x-0 after:top-full after:h-2.5 after:content-['']">
        <a href="#company" class="flex items-center gap-1.5 rounded-[10px] px-3.5 py-2 text-sm font-semibold text-tdd06-ink no-underline transition-colors duration-150 group-hover:bg-tdd06-tint group-hover:text-tdd06-acc focus-visible:bg-tdd06-tint focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tdd06-acc"><span>Company</span><span class="text-xs text-tdd06-mut transition-transform duration-200 group-hover:rotate-180 group-hover:text-tdd06-acc group-focus-within:rotate-180" aria-hidden="true">&#9662;</span></a>
        <div class="pointer-events-none absolute top-[calc(100%+10px)] left-1/2 flex min-w-50 -translate-x-1/2 flex-col gap-0.5 rounded-2xl border border-tdd06-edge bg-white p-2 opacity-0 shadow-[0_12px_40px_oklch(0_0_0/0.1)] transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
          <a href="#about" style="--i:0;--c:#ef4444" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>About</a>
          <a href="#blog" style="--i:1;--c:#a855f7" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Blog</a>
          <a href="#careers" style="--i:2;--c:#0ea5e9" class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-tdd06-ink no-underline opacity-0 -translate-x-2.5 transition-[opacity,translate,background] duration-300 ease-tdd06 hover:bg-tdd06-hover focus-visible:bg-tdd06-hover focus-visible:outline-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:[transition-delay:calc(var(--i)*60ms)] group-focus-within:opacity-100 group-focus-within:translate-x-0 motion-reduce:[transition-delay:0ms]"><i class="size-2 shrink-0 rounded-full bg-[var(--c)]" aria-hidden="true"></i>Careers</a>
        </div>
      </div>
    </div>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd06-bg1: #f0fdf4;
  --color-tdd06-bg1: oklch(0.98 0.02 150);
  --color-tdd06-bg2: #ecfdf5;
  --color-tdd06-bg2: oklch(0.98 0.02 165);
  --color-tdd06-bg3: #f0f9ff;
  --color-tdd06-bg3: oklch(0.98 0.02 230);
  --color-tdd06-ink: #1e293b;
  --color-tdd06-ink: oklch(0.28 0.03 260);
  --color-tdd06-mut: #94a3b8;
  --color-tdd06-mut: oklch(0.7 0.03 255);
  --color-tdd06-edge: #e2e8f0;
  --color-tdd06-edge: oklch(0.92 0.01 255);
  --color-tdd06-tint: #eef2ff;
  --color-tdd06-tint: oklch(0.96 0.02 275);
  --color-tdd06-hover: #f8fafc;
  --color-tdd06-hover: oklch(0.98 0.005 255);
  --color-tdd06-acc: #6366f1;
  --color-tdd06-acc: oklch(0.59 0.2 278);
  --font-tdd06-sans: 'Nunito', system-ui, sans-serif;
  --ease-tdd06: cubic-bezier(0.16, 1, 0.3, 1);
}

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

.tdd-06 ::selection {
  background: var(--color-tdd06-acc);
  color: #fff;
}
```

How this works

One utility, any number of links. The index lives on the element, the formula lives in the class:

<a style="--i:2" class="opacity-0 -translate-x-2.5
  group-hover:opacity-100 group-hover:translate-x-0
  group-hover:[transition-delay:calc(var(--i)*60ms)]">

Five nth-child rules collapse to zero, and re-ordering the markup no longer means re-indexing a stylesheet.

Transitions, not keyframes. The original used a CSS animation, which restarts every time hover re-fires — flick the pointer across the nav and the items re-play. A transition simply reverses from wherever it is.

The delay is one-directional. Because transition-delay is only set in the group-hover: half, the cascade applies on open and the close is immediate — which is the behaviour you want, since nobody wants to wait 300ms to dismiss a menu.

Make it yours

  • Tempo: the 60ms multiplier. Drop it to 30ms for a tight ripple, raise to 90ms for a theatrical one.
  • Direction: swap -translate-x-2.5 for translate-y-2.5 to cascade upward instead of sideways.
  • Reverse order: use calc((4-var(--i))*60ms) to run the stagger bottom-to-top.
  • Per-item colour: the --c property already drives each dot; point text-[var(--c)] at it too for coloured labels on hover.

Gotchas — read before shipping

  • A custom property in an arbitrary value must be spelled [transition-delay:calc(var(--i)*60ms)] with no spaces — underscores if you need them.
  • Setting the delay in the base (closed) class list makes closing staggered too, which feels broken. Keep it inside the open variant.
  • Inline --i values are content, not style: they belong in the template that renders the list, and they are the one thing the compiler cannot see.
  • If you must use animation instead, add animation-fill-mode: both or the items flash before their delay elapses.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Custom properties inside calc() in transition-delay are universally supported.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transition delaytw ↗transitionstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

custom propertiestw ↗oklch()tw ↗

Arbitraryneeds bracket syntax

calctw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →