20 Tailwind CSS Responsive Navbars
02 / 20

All 20 in 20 Tailwind CSS Responsive Navbars

  1. 01Tailwind Glassmorphism Frosted Navbar
  2. 02Tailwind Mega Menu Dropdown Navbar
  3. 03Tailwind Sidebar Drawer Navigation
  4. 04Tailwind Animated Underline Tabs Navbar
  5. 05Tailwind Pill Highlight Navigation Bar
  6. 06Tailwind Scroll-Aware Shrink Navbar
  7. 07Tailwind Neon Dark Navbar
  8. 08Tailwind Breadcrumb Reading Progress Navbar
  9. 09Tailwind Split Two-Tone Navbar
  10. 10Tailwind Bottom Tab Bar Navigation
  11. 11Tailwind Gradient Border Animated Navbar
  12. 12Tailwind Centered Logo Navbar
  13. 13Tailwind Icon Dot Indicator Navbar
  14. 14Tailwind Full-Screen Overlay Menu
  15. 15Tailwind Morphing Search Expand Navbar
  16. 16Tailwind Floating Island Multi-Segment Navbar
  17. 17Tailwind Step Progress Wizard Navbar
  18. 18Tailwind Vertical Rail Sidebar Navbar
  19. 19Tailwind Announcement Bar Dual Navbar
  20. 20Tailwind Scroll Spy Active Highlight Navbar
Pure TailwindMIT licensed

Tailwind Mega Menu Dropdown Navbar

The three-column mega panel with icon cards, ported without a single descendant selector: group on the nav item, group-hover:/group-focus-within: on the panel, grid-cols-3 inside it. On mobile the same sections become native <details> disclosures — which is what the CSS version's flattened link list wanted to be.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<div class="tnb-02 group w-full min-h-svh bg-tnb02-page font-tnb02-sans text-tnb02-ink" aria-label="Mega menu dropdown navbar demo">
  <input type="checkbox" id="tnb02-menu" class="sr-only peer" aria-label="Toggle navigation menu">
  <header class="sticky top-0 z-200 border-b border-tnb02-edge bg-white shadow-[0_1px_3px_oklch(0_0_0/0.06)]">
    <nav class="mx-auto flex h-17 max-w-6xl items-center gap-6 px-5 md:px-8" aria-label="Primary">
      <a href="#home" class="shrink-0 text-xl font-bold tracking-[-0.03em] text-tnb02-ink no-underline">Nova<span class="text-tnb02-acc">.</span></a>
      <ul class="hidden flex-1 list-none items-center gap-0 md:flex">
        <li class="group/item relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
          <a href="#products" class="flex items-center gap-1 rounded-lg px-4 py-2 text-sm font-medium whitespace-nowrap text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Products <span class="inline-block text-[11px] leading-none text-tnb02-mut transition-transform duration-200 group-hover/item:rotate-180 group-hover/item:text-tnb02-acc group-focus-within/item:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#9662;</span></a>
          <div class="pointer-events-none invisible absolute top-[calc(100%+8px)] -left-4 grid w-175 -translate-y-2 grid-cols-3 gap-6 rounded-2xl border border-tnb02-edge bg-white p-6 opacity-0 shadow-[0_20px_60px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 ease-out group-hover/item:pointer-events-auto group-hover/item:visible group-hover/item:translate-y-0 group-hover/item:opacity-100 group-focus-within/item:pointer-events-auto group-focus-within/item:visible group-focus-within/item:translate-y-0 group-focus-within/item:opacity-100 motion-reduce:transition-none">
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">Core tools</p>
              <a href="#design" class="group/card mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#127912;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Design Studio</span><span class="block text-xs leading-snug text-tnb02-mut">Pixel-perfect interfaces</span></span></a>
              <a href="#proto" class="group/card flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#9889;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Prototyping</span><span class="block text-xs leading-snug text-tnb02-mut">Interactive mockups in minutes</span></span></a>
            </div>
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">Collaboration</p>
              <a href="#teams" class="group/card mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#128101;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Teams</span><span class="block text-xs leading-snug text-tnb02-mut">Real-time multiplayer editing</span></span></a>
              <a href="#comments" class="group/card flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#128172;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Comments</span><span class="block text-xs leading-snug text-tnb02-mut">Contextual feedback flows</span></span></a>
            </div>
            <div class="rounded-xl bg-linear-[135deg,var(--color-tnb02-tint),var(--color-tnb02-tint2)] p-5">
              <p class="mb-2 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-acc">Featured</p>
              <p class="mb-1.5 text-base font-bold text-tnb02-ink">Nova 3.0 is here</p>
              <p class="mb-4 text-xs leading-snug text-tnb02-mut">Variable fonts, live components and an API that finally makes sense.</p>
              <a href="#whats-new" class="text-sm font-semibold text-tnb02-acc no-underline hover:underline">What's new &rarr;</a>
            </div>
          </div>
        </li>
        <li class="group/item relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
          <a href="#solutions" class="flex items-center gap-1 rounded-lg px-4 py-2 text-sm font-medium whitespace-nowrap text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Solutions <span class="inline-block text-[11px] leading-none text-tnb02-mut transition-transform duration-200 group-hover/item:rotate-180 group-hover/item:text-tnb02-acc group-focus-within/item:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#9662;</span></a>
          <div class="pointer-events-none invisible absolute top-[calc(100%+8px)] -left-4 grid w-140 -translate-y-2 grid-cols-2 gap-6 rounded-2xl border border-tnb02-edge bg-white p-6 opacity-0 shadow-[0_20px_60px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 ease-out group-hover/item:pointer-events-auto group-hover/item:visible group-hover/item:translate-y-0 group-hover/item:opacity-100 group-focus-within/item:pointer-events-auto group-focus-within/item:visible group-focus-within/item:translate-y-0 group-focus-within/item:opacity-100 motion-reduce:transition-none">
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">By team</p>
              <a href="#enterprise" class="mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#127970;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Enterprise</span><span class="block text-xs leading-snug text-tnb02-mut">Advanced security &amp; compliance</span></span></a>
              <a href="#startups" class="flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#128640;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Startups</span><span class="block text-xs leading-snug text-tnb02-mut">Move fast, ship beautiful</span></span></a>
            </div>
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">By role</p>
              <a href="#designers" class="mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#9999;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Designers</span><span class="block text-xs leading-snug text-tnb02-mut">Your complete design OS</span></span></a>
              <a href="#developers" class="flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#128187;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Developers</span><span class="block text-xs leading-snug text-tnb02-mut">Inspect &amp; export real code</span></span></a>
            </div>
          </div>
        </li>
        <li><a href="#pricing" class="flex rounded-lg px-4 py-2 text-sm font-medium text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Pricing</a></li>
        <li><a href="#blog" class="flex rounded-lg px-4 py-2 text-sm font-medium text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Blog</a></li>
      </ul>
      <div class="hidden shrink-0 items-center gap-3 md:flex">
        <a href="#login" class="rounded-lg px-4 py-2 text-sm font-semibold text-tnb02-ink no-underline transition-colors hover:bg-tnb02-hover">Log in</a>
        <a href="#try" class="rounded-lg bg-tnb02-acc px-4 py-2 text-sm font-semibold text-white no-underline transition-[background,translate] duration-200 hover:-translate-y-px hover:bg-tnb02-accdark motion-reduce:transition-none motion-reduce:hover:translate-y-0">Try for free</a>
      </div>
      <label for="tnb02-menu" class="ml-auto flex size-11 cursor-pointer flex-col items-center justify-center gap-1.5 md:hidden" aria-hidden="true">
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb02-ink transition-transform duration-300 group-has-checked:translate-y-2 group-has-checked:rotate-45 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb02-ink transition-opacity duration-300 group-has-checked:opacity-0 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb02-ink transition-transform duration-300 group-has-checked:-translate-y-2 group-has-checked:-rotate-45 motion-reduce:transition-none"></span>
      </label>
    </nav>
    <div class="hidden border-t border-tnb02-edge px-5 py-3 max-md:group-has-checked:block">
      <details class="group/dis border-b border-tnb02-edge">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between text-[15px] font-semibold text-tnb02-ink marker:content-none">Products <span class="text-xs text-tnb02-mut transition-transform duration-200 group-open/dis:rotate-180" aria-hidden="true">&#9662;</span></summary>
        <div class="grid pb-2">
          <a href="#design" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#127912;</span>Design Studio</a>
          <a href="#proto" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#9889;</span>Prototyping</a>
          <a href="#teams" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#128101;</span>Teams</a>
        </div>
      </details>
      <details class="group/dis border-b border-tnb02-edge">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between text-[15px] font-semibold text-tnb02-ink marker:content-none">Solutions <span class="text-xs text-tnb02-mut transition-transform duration-200 group-open/dis:rotate-180" aria-hidden="true">&#9662;</span></summary>
        <div class="grid pb-2">
          <a href="#enterprise" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#127970;</span>Enterprise</a>
          <a href="#startups" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#128640;</span>Startups</a>
        </div>
      </details>
      <a href="#pricing" class="flex min-h-11 items-center border-b border-tnb02-edge text-[15px] font-semibold text-tnb02-ink no-underline">Pricing</a>
      <a href="#blog" class="flex min-h-11 items-center border-b border-tnb02-edge text-[15px] font-semibold text-tnb02-ink no-underline">Blog</a>
      <a href="#try" class="mt-3 flex min-h-11 items-center justify-center rounded-lg bg-tnb02-acc text-sm font-semibold text-white no-underline">Try for free</a>
    </div>
  </header>
  <main class="mx-auto max-w-3xl px-5 py-16 md:px-8">
    <h1 class="mb-4 text-4xl font-bold tracking-[-0.03em] text-tnb02-ink">Mega Menu Dropdown Navbar</h1>
    <p class="text-lg leading-relaxed text-tnb02-mut">Hover — or <strong class="font-semibold text-tnb02-ink">Tab into</strong> — Products or Solutions. The panel is a <code class="rounded bg-tnb02-tint px-1.5 py-0.5 text-[0.9em] text-tnb02-acc">grid-cols-3</code> inside a <code class="rounded bg-tnb02-tint px-1.5 py-0.5 text-[0.9em] text-tnb02-acc">group-hover:</code> panel, and keyboard users get the same menu the mouse does.</p>
  </main>
</div>
@import "tailwindcss";

@theme {
  --color-tnb02-page: #ffffff;
  --color-tnb02-page: oklch(1 0 0);
  --color-tnb02-ink: #1a1a2e;
  --color-tnb02-ink: oklch(0.24 0.04 280);
  --color-tnb02-mut: #6b7280;
  --color-tnb02-mut: oklch(0.55 0.02 265);
  --color-tnb02-edge: #e5e7eb;
  --color-tnb02-edge: oklch(0.91 0.005 265);
  --color-tnb02-hover: #f3f4f6;
  --color-tnb02-hover: oklch(0.96 0.003 265);
  --color-tnb02-tint: #fdf2f8;
  --color-tnb02-tint: oklch(0.97 0.02 340);
  --color-tnb02-tint2: #fce7f3;
  --color-tnb02-tint2: oklch(0.94 0.04 345);
  --color-tnb02-acc: #e84393;
  --color-tnb02-acc: oklch(0.63 0.21 350);
  --color-tnb02-accdark: #d1236a;
  --color-tnb02-accdark: oklch(0.56 0.21 350);
  --font-tnb02-sans: 'DM Sans', system-ui, sans-serif;
}

.tnb-02 {
  width: 100%;
  min-height: 100svh;
}

.tnb-02 ::selection {
  background: var(--color-tnb02-acc);
  color: #fff;
}
/* <summary> marker removal needs a pseudo-element selector with no variant form. */

.tnb-02 summary::-webkit-details-marker {
  display: none;
}

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-tnb02-page: #ffffff;
  --color-tnb02-page: oklch(1 0 0);
  --color-tnb02-ink: #1a1a2e;
  --color-tnb02-ink: oklch(0.24 0.04 280);
  --color-tnb02-mut: #6b7280;
  --color-tnb02-mut: oklch(0.55 0.02 265);
  --color-tnb02-edge: #e5e7eb;
  --color-tnb02-edge: oklch(0.91 0.005 265);
  --color-tnb02-hover: #f3f4f6;
  --color-tnb02-hover: oklch(0.96 0.003 265);
  --color-tnb02-tint: #fdf2f8;
  --color-tnb02-tint: oklch(0.97 0.02 340);
  --color-tnb02-tint2: #fce7f3;
  --color-tnb02-tint2: oklch(0.94 0.04 345);
  --color-tnb02-acc: #e84393;
  --color-tnb02-acc: oklch(0.63 0.21 350);
  --color-tnb02-accdark: #d1236a;
  --color-tnb02-accdark: oklch(0.56 0.21 350);
  --font-tnb02-sans: 'DM Sans', system-ui, sans-serif;
}

.tnb-02 {
  width: 100%;
  min-height: 100svh;
}

.tnb-02 ::selection {
  background: var(--color-tnb02-acc);
  color: #fff;
}
/* <summary> marker removal needs a pseudo-element selector with no variant form. */

.tnb-02 summary::-webkit-details-marker {
  display: none;
}
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=DM+Sans:wght@400;500;600;700&display=swap">

What changed in the port

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

  • Four .item:hover .mega rule pairs collapse into group/item + group-hover/item:, and each gained a group-focus-within/item: twin the CSS original never had.
  • The hover bridge stops being a commented ::after block in the stylesheet and becomes four visible classes on the element that owns the hover.
  • The mobile drawer upgrades from a flat list of links to real <details> disclosures — semantics the utility rewrite made cheap enough to bother with.
  • The panel's featured cell is a plain bg-linear-[…] tile instead of a second CSS rule, so the mega menu's whole layout lives in the markup.
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 Mega Menu Dropdown Navbar
Source: https://codefronts.com/navigation/tailwind-css-responsive-navbars/tailwind-mega-menu-dropdown-navbar/

The three-column mega panel with icon cards, ported without a single descendant selector: group on the nav item, group-hover:/group-focus-within: on the panel, grid-cols-3 inside it. On mobile the same sections become native <details> disclosures — which is what the CSS version's flattened link list wanted to be.
## HTML
```html
<div class="tnb-02 group w-full min-h-svh bg-tnb02-page font-tnb02-sans text-tnb02-ink" aria-label="Mega menu dropdown navbar demo">
  <input type="checkbox" id="tnb02-menu" class="sr-only peer" aria-label="Toggle navigation menu">
  <header class="sticky top-0 z-200 border-b border-tnb02-edge bg-white shadow-[0_1px_3px_oklch(0_0_0/0.06)]">
    <nav class="mx-auto flex h-17 max-w-6xl items-center gap-6 px-5 md:px-8" aria-label="Primary">
      <a href="#home" class="shrink-0 text-xl font-bold tracking-[-0.03em] text-tnb02-ink no-underline">Nova<span class="text-tnb02-acc">.</span></a>
      <ul class="hidden flex-1 list-none items-center gap-0 md:flex">
        <li class="group/item relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
          <a href="#products" class="flex items-center gap-1 rounded-lg px-4 py-2 text-sm font-medium whitespace-nowrap text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Products <span class="inline-block text-[11px] leading-none text-tnb02-mut transition-transform duration-200 group-hover/item:rotate-180 group-hover/item:text-tnb02-acc group-focus-within/item:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#9662;</span></a>
          <div class="pointer-events-none invisible absolute top-[calc(100%+8px)] -left-4 grid w-175 -translate-y-2 grid-cols-3 gap-6 rounded-2xl border border-tnb02-edge bg-white p-6 opacity-0 shadow-[0_20px_60px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 ease-out group-hover/item:pointer-events-auto group-hover/item:visible group-hover/item:translate-y-0 group-hover/item:opacity-100 group-focus-within/item:pointer-events-auto group-focus-within/item:visible group-focus-within/item:translate-y-0 group-focus-within/item:opacity-100 motion-reduce:transition-none">
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">Core tools</p>
              <a href="#design" class="group/card mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#127912;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Design Studio</span><span class="block text-xs leading-snug text-tnb02-mut">Pixel-perfect interfaces</span></span></a>
              <a href="#proto" class="group/card flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#9889;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Prototyping</span><span class="block text-xs leading-snug text-tnb02-mut">Interactive mockups in minutes</span></span></a>
            </div>
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">Collaboration</p>
              <a href="#teams" class="group/card mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#128101;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Teams</span><span class="block text-xs leading-snug text-tnb02-mut">Real-time multiplayer editing</span></span></a>
              <a href="#comments" class="group/card flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base transition-colors group-hover/card:bg-tnb02-tint2" aria-hidden="true">&#128172;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Comments</span><span class="block text-xs leading-snug text-tnb02-mut">Contextual feedback flows</span></span></a>
            </div>
            <div class="rounded-xl bg-linear-[135deg,var(--color-tnb02-tint),var(--color-tnb02-tint2)] p-5">
              <p class="mb-2 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-acc">Featured</p>
              <p class="mb-1.5 text-base font-bold text-tnb02-ink">Nova 3.0 is here</p>
              <p class="mb-4 text-xs leading-snug text-tnb02-mut">Variable fonts, live components and an API that finally makes sense.</p>
              <a href="#whats-new" class="text-sm font-semibold text-tnb02-acc no-underline hover:underline">What's new &rarr;</a>
            </div>
          </div>
        </li>
        <li class="group/item relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
          <a href="#solutions" class="flex items-center gap-1 rounded-lg px-4 py-2 text-sm font-medium whitespace-nowrap text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Solutions <span class="inline-block text-[11px] leading-none text-tnb02-mut transition-transform duration-200 group-hover/item:rotate-180 group-hover/item:text-tnb02-acc group-focus-within/item:rotate-180 motion-reduce:transition-none" aria-hidden="true">&#9662;</span></a>
          <div class="pointer-events-none invisible absolute top-[calc(100%+8px)] -left-4 grid w-140 -translate-y-2 grid-cols-2 gap-6 rounded-2xl border border-tnb02-edge bg-white p-6 opacity-0 shadow-[0_20px_60px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 ease-out group-hover/item:pointer-events-auto group-hover/item:visible group-hover/item:translate-y-0 group-hover/item:opacity-100 group-focus-within/item:pointer-events-auto group-focus-within/item:visible group-focus-within/item:translate-y-0 group-focus-within/item:opacity-100 motion-reduce:transition-none">
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">By team</p>
              <a href="#enterprise" class="mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#127970;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Enterprise</span><span class="block text-xs leading-snug text-tnb02-mut">Advanced security &amp; compliance</span></span></a>
              <a href="#startups" class="flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#128640;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Startups</span><span class="block text-xs leading-snug text-tnb02-mut">Move fast, ship beautiful</span></span></a>
            </div>
            <div>
              <p class="mb-3 text-[11px] font-semibold tracking-[0.08em] uppercase text-tnb02-mut">By role</p>
              <a href="#designers" class="mb-1 flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#9999;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Designers</span><span class="block text-xs leading-snug text-tnb02-mut">Your complete design OS</span></span></a>
              <a href="#developers" class="flex items-start gap-3 rounded-xl p-2.5 no-underline transition-colors duration-150 hover:bg-tnb02-tint focus-visible:bg-tnb02-tint focus-visible:outline-none"><span class="grid size-9 shrink-0 place-items-center rounded-lg bg-tnb02-tint text-base" aria-hidden="true">&#128187;</span><span><span class="block text-sm font-semibold text-tnb02-ink">Developers</span><span class="block text-xs leading-snug text-tnb02-mut">Inspect &amp; export real code</span></span></a>
            </div>
          </div>
        </li>
        <li><a href="#pricing" class="flex rounded-lg px-4 py-2 text-sm font-medium text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Pricing</a></li>
        <li><a href="#blog" class="flex rounded-lg px-4 py-2 text-sm font-medium text-tnb02-ink no-underline transition-colors duration-150 hover:bg-tnb02-tint hover:text-tnb02-acc focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tnb02-acc">Blog</a></li>
      </ul>
      <div class="hidden shrink-0 items-center gap-3 md:flex">
        <a href="#login" class="rounded-lg px-4 py-2 text-sm font-semibold text-tnb02-ink no-underline transition-colors hover:bg-tnb02-hover">Log in</a>
        <a href="#try" class="rounded-lg bg-tnb02-acc px-4 py-2 text-sm font-semibold text-white no-underline transition-[background,translate] duration-200 hover:-translate-y-px hover:bg-tnb02-accdark motion-reduce:transition-none motion-reduce:hover:translate-y-0">Try for free</a>
      </div>
      <label for="tnb02-menu" class="ml-auto flex size-11 cursor-pointer flex-col items-center justify-center gap-1.5 md:hidden" aria-hidden="true">
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb02-ink transition-transform duration-300 group-has-checked:translate-y-2 group-has-checked:rotate-45 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb02-ink transition-opacity duration-300 group-has-checked:opacity-0 motion-reduce:transition-none"></span>
        <span class="block h-0.5 w-5.5 rounded-sm bg-tnb02-ink transition-transform duration-300 group-has-checked:-translate-y-2 group-has-checked:-rotate-45 motion-reduce:transition-none"></span>
      </label>
    </nav>
    <div class="hidden border-t border-tnb02-edge px-5 py-3 max-md:group-has-checked:block">
      <details class="group/dis border-b border-tnb02-edge">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between text-[15px] font-semibold text-tnb02-ink marker:content-none">Products <span class="text-xs text-tnb02-mut transition-transform duration-200 group-open/dis:rotate-180" aria-hidden="true">&#9662;</span></summary>
        <div class="grid pb-2">
          <a href="#design" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#127912;</span>Design Studio</a>
          <a href="#proto" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#9889;</span>Prototyping</a>
          <a href="#teams" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#128101;</span>Teams</a>
        </div>
      </details>
      <details class="group/dis border-b border-tnb02-edge">
        <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between text-[15px] font-semibold text-tnb02-ink marker:content-none">Solutions <span class="text-xs text-tnb02-mut transition-transform duration-200 group-open/dis:rotate-180" aria-hidden="true">&#9662;</span></summary>
        <div class="grid pb-2">
          <a href="#enterprise" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#127970;</span>Enterprise</a>
          <a href="#startups" class="flex min-h-11 items-center gap-2.5 rounded-lg px-2 text-sm text-tnb02-mut no-underline hover:text-tnb02-acc"><span aria-hidden="true">&#128640;</span>Startups</a>
        </div>
      </details>
      <a href="#pricing" class="flex min-h-11 items-center border-b border-tnb02-edge text-[15px] font-semibold text-tnb02-ink no-underline">Pricing</a>
      <a href="#blog" class="flex min-h-11 items-center border-b border-tnb02-edge text-[15px] font-semibold text-tnb02-ink no-underline">Blog</a>
      <a href="#try" class="mt-3 flex min-h-11 items-center justify-center rounded-lg bg-tnb02-acc text-sm font-semibold text-white no-underline">Try for free</a>
    </div>
  </header>
  <main class="mx-auto max-w-3xl px-5 py-16 md:px-8">
    <h1 class="mb-4 text-4xl font-bold tracking-[-0.03em] text-tnb02-ink">Mega Menu Dropdown Navbar</h1>
    <p class="text-lg leading-relaxed text-tnb02-mut">Hover — or <strong class="font-semibold text-tnb02-ink">Tab into</strong> — Products or Solutions. The panel is a <code class="rounded bg-tnb02-tint px-1.5 py-0.5 text-[0.9em] text-tnb02-acc">grid-cols-3</code> inside a <code class="rounded bg-tnb02-tint px-1.5 py-0.5 text-[0.9em] text-tnb02-acc">group-hover:</code> panel, and keyboard users get the same menu the mouse does.</p>
  </main>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tnb02-page: #ffffff;
  --color-tnb02-page: oklch(1 0 0);
  --color-tnb02-ink: #1a1a2e;
  --color-tnb02-ink: oklch(0.24 0.04 280);
  --color-tnb02-mut: #6b7280;
  --color-tnb02-mut: oklch(0.55 0.02 265);
  --color-tnb02-edge: #e5e7eb;
  --color-tnb02-edge: oklch(0.91 0.005 265);
  --color-tnb02-hover: #f3f4f6;
  --color-tnb02-hover: oklch(0.96 0.003 265);
  --color-tnb02-tint: #fdf2f8;
  --color-tnb02-tint: oklch(0.97 0.02 340);
  --color-tnb02-tint2: #fce7f3;
  --color-tnb02-tint2: oklch(0.94 0.04 345);
  --color-tnb02-acc: #e84393;
  --color-tnb02-acc: oklch(0.63 0.21 350);
  --color-tnb02-accdark: #d1236a;
  --color-tnb02-accdark: oklch(0.56 0.21 350);
  --font-tnb02-sans: 'DM Sans', system-ui, sans-serif;
}

.tnb-02 {
  width: 100%;
  min-height: 100svh;
}

.tnb-02 ::selection {
  background: var(--color-tnb02-acc);
  color: #fff;
}
/* <summary> marker removal needs a pseudo-element selector with no variant form. */

.tnb-02 summary::-webkit-details-marker {
  display: none;
}
```

How this works

The panel holds both states. Closed geometry and open geometry sit in one class list on the panel, so they cannot drift:

class="pointer-events-none invisible -translate-y-2 opacity-0
  group-hover/item:pointer-events-auto group-hover/item:visible
  group-hover/item:translate-y-0 group-hover/item:opacity-100"

The bridge is not decoration. There are 8px of visible gap between the trigger and the panel, and a closed panel is pointer-events-none, so it cannot keep its own hover alive. The after: strip on the group covers exactly that gap.

Mobile gets semantics, not a copy. The narrow layout uses <details>/<summary>, so the sub-menus are keyboard- and screen-reader-correct with zero script, and the caret rotation reads open: directly off the element.

Make it yours

  • Column count: grid-cols-3 on the wide panel, grid-cols-2 on the narrower one. Three columns suits six to nine cards.
  • Featured card: drop an <img> into the last cell and give it col-span-1 row-span-2 object-cover.
  • Reveal speed: duration-200 on the panel; past 350ms a full-width panel starts to feel heavy.
  • Retheme through --color-tnb02-acc — caret, icon tiles, hover tint and CTA all read it.

Gotchas — read before shipping

  • Without the after: bridge the panel closes in the 8px gap; with it, the strip must be on the group, not the panel.
  • group-focus-within: keeps the panel open while a child has focus, but Escape will not close a pure-CSS panel — add a data-open toggle if you need dismissal.
  • A named group (group/item) is required here: three sibling triggers each own a panel, and an unnamed group would let the outer nav match too.
  • The panel is invisible when closed, not just opacity-0 — a transparent panel that Tab can enter is a focus-order failure.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

:focus-within and <details> are Baseline; the floor quoted is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗transitionstw ↗pseudo elementstw ↗:focus-withintw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →