15 Tailwind CSS Navigation Menus
10 / 15

All 15 in 15 Tailwind CSS Navigation Menus

  1. 01Tailwind CSS Navbar with Animated Hover Underline
  2. 02Tailwind CSS Dropdown Menu — Hover & Keyboard Accessible
  3. 03Tailwind CSS Mega Menu Navigation
  4. 04Tailwind CSS Hamburger Menu with Slide-Out Drawer
  5. 05Tailwind CSS Full-Screen Overlay Menu
  6. 06Tailwind CSS Sticky Navbar That Shrinks on Scroll
  7. 07Tailwind CSS Collapsible Sidebar Navigation
  8. 08Tailwind CSS Tabs with Animated Sliding Indicator
  9. 09Tailwind CSS Breadcrumb Navigation Examples
  10. 10Glassmorphism Navbar in Tailwind CSS
  11. 11Tailwind CSS Mobile Bottom Navigation Bar with Animated Icons
  12. 12Tailwind CSS Multi-Level Accordion Sidebar Menu
  13. 13Tailwind CSS Navbar with Magnetic Hover Effect
  14. 14Tailwind CSS Neon Glow Navigation Menu
  15. 15Tailwind CSS Animated Pill Navigation Indicator
Pure TailwindMIT licensed

Glassmorphism Navbar in Tailwind CSS

A floating frosted-glass navbar over drifting aurora orbs, with a matching glass hero card. The glass is backdrop-blur-2xl backdrop-saturate-150 plus an inner specular highlight, and it falls back to a solid tinted surface via supports-[backdrop-filter:blur(1px)]: where blur isn't available. Orbs drift on three @theme animations and stop under reduced motion. Zero JavaScript.

Live Demo
Plain CSSTailwind v4
Try it

Nucleo: 44,000+ SVG icons in five families · All Icons Bundle $149

Nucleo · Affiliate link

Get the Nucleo bundle

The code

<div class="tnv-10 relative isolate min-h-svh w-full overflow-hidden bg-tnv10-bg bg-[radial-gradient(ellipse_at_20%_50%,#3730a3_0%,transparent_50%),radial-gradient(ellipse_at_80%_20%,#7e22ce_0%,transparent_45%),radial-gradient(ellipse_at_60%_90%,#1d4ed8_0%,transparent_45%)] font-tnv10-sans text-white antialiased selection:bg-indigo-500 selection:text-white">
  <div aria-hidden="true" class="pointer-events-none absolute -top-24 -left-24 -z-10 size-[26rem] animate-tnv10-a rounded-full bg-indigo-500 opacity-50 blur-[70px] motion-reduce:animate-none"></div>
  <div aria-hidden="true" class="pointer-events-none absolute right-[10%] -bottom-20 -z-10 size-[22rem] animate-tnv10-b rounded-full bg-violet-600 opacity-45 blur-[70px] motion-reduce:animate-none"></div>
  <div aria-hidden="true" class="pointer-events-none absolute top-[40%] left-[60%] -z-10 size-72 animate-tnv10-c rounded-full bg-blue-600 opacity-45 blur-[70px] motion-reduce:animate-none"></div>
  <header class="sticky top-5 z-20 mx-4 mt-5 sm:mx-10">
    <nav aria-label="Main" class="mx-auto flex max-w-5xl items-center justify-between gap-4 rounded-[20px] border border-white/15 bg-tnv10-solid py-2.5 pr-2.5 pl-5 shadow-[0_8px_32px_rgb(0_0_0/0.25),inset_0_1px_0_rgb(255_255_255/0.25)] backdrop-blur-2xl backdrop-saturate-150 supports-[backdrop-filter:blur(1px)]:bg-white/10">
      <a href="#" class="flex items-center gap-2.5 text-lg font-bold tracking-[-0.02em]"><span class="grid size-8 place-items-center rounded-[10px] border border-white/20 bg-white/15 shadow-[inset_0_1px_0_rgb(255_255_255/0.3)]"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></span>Prism</a>
      <ul class="hidden items-center gap-0.5 text-sm font-semibold text-white/75 md:flex [&_a]:flex [&_a]:h-10 [&_a]:items-center [&_a]:rounded-xl [&_a]:px-4 [&_a]:transition-colors [&_a:hover]:bg-white/10 [&_a:hover]:text-white [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-white/60 [&_a[aria-current]]:bg-white/15 [&_a[aria-current]]:text-white [&_a[aria-current]]:shadow-[inset_0_1px_0_rgb(255_255_255/0.2)]">
        <li><a href="#" aria-current="page">Home</a></li><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Blog</a></li>
      </ul>
      <div class="flex items-center gap-2 text-sm font-semibold">
        <a href="#" class="hidden h-10 items-center rounded-xl border border-white/20 px-4 transition-colors hover:bg-white/10 sm:inline-flex">Log in</a>
        <a href="#" class="inline-flex h-10 items-center rounded-xl bg-white px-4 text-tnv10-bg shadow-[0_8px_24px_-8px_rgb(165_180_252/0.8)] transition hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Sign up free</a>
      </div>
    </nav>
  </header>
  <main class="relative grid min-h-[82svh] place-items-center px-5 py-20 text-center [&_code]:rounded [&_code]:bg-white/10 [&_code]:px-1.5 [&_code]:font-tnv10-mono [&_code]:text-[0.85em]">
    <div class="max-w-xl rounded-3xl border border-white/15 bg-tnv10-solid px-7 py-12 shadow-[0_24px_64px_rgb(0_0_0/0.3),inset_0_1px_0_rgb(255_255_255/0.2)] backdrop-blur-2xl backdrop-saturate-150 transition-[opacity,translate,scale] duration-700 ease-out supports-[backdrop-filter:blur(1px)]:bg-white/[0.08] starting:translate-y-4 starting:scale-[0.98] starting:opacity-0 sm:px-12">
      <h1 class="text-[clamp(2rem,5.5vw,3.25rem)] leading-[1.1] font-bold tracking-[-0.04em] text-balance">Design <span class="bg-linear-135 from-indigo-200 to-violet-300 bg-clip-text text-transparent">through glass</span></h1>
      <p class="mt-4 text-base/[1.7] text-white/80 text-pretty">The navbar and this card use <code>backdrop-blur-2xl</code> with <code>backdrop-saturate-150</code>, an inner specular edge, and a solid fallback where blur is unavailable.</p>
      <a href="#" class="mt-7 inline-flex min-h-12 items-center gap-2 rounded-2xl border border-white/25 bg-white/15 px-7 font-bold transition hover:bg-white/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Explore<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
      <ul class="mt-7 flex flex-wrap justify-center gap-2.5 text-[13px] font-semibold text-white/75 [&_b]:text-white [&>li]:rounded-full [&>li]:border [&>li]:border-white/12 [&>li]:bg-white/[0.07] [&>li]:px-4 [&>li]:py-2">
        <li><b>backdrop-blur</b> frost</li><li><b>saturate</b> colour</li><li><b>supports-</b> fallback</li>
      </ul>
    </div>
  </main>
</div>
@import "tailwindcss";

@theme {
  --color-tnv10-bg: #0a0a1a;
  --color-tnv10-bg: oklch(0.15 0.03 285);
  --color-tnv10-solid: #2a2850e6;
  --color-tnv10-solid: oklch(0.3 0.07 285 / 0.9);
  --font-tnv10-sans: 'Sora', system-ui, sans-serif;
  --font-tnv10-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tnv10-a: tnv10-drift 14s ease-in-out infinite alternate;
  --animate-tnv10-b: tnv10-drift 18s ease-in-out -4s infinite alternate-reverse;
  --animate-tnv10-c: tnv10-drift 11s ease-in-out -8s infinite alternate;

  @keyframes tnv10-drift {
    0% {
      translate: 0 0;
      scale: 1;
    }

    100% {
      translate: 40px 30px;
      scale: 1.08;
    }
  }
}

.tnv-10 {
  width: 100%;
  min-height: 100svh;
}

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-tnv10-bg: #0a0a1a;
  --color-tnv10-bg: oklch(0.15 0.03 285);
  --color-tnv10-solid: #2a2850e6;
  --color-tnv10-solid: oklch(0.3 0.07 285 / 0.9);
  --font-tnv10-sans: 'Sora', system-ui, sans-serif;
  --font-tnv10-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tnv10-a: tnv10-drift 14s ease-in-out infinite alternate;
  --animate-tnv10-b: tnv10-drift 18s ease-in-out -4s infinite alternate-reverse;
  --animate-tnv10-c: tnv10-drift 11s ease-in-out -8s infinite alternate;

  @keyframes tnv10-drift {
    0% {
      translate: 0 0;
      scale: 1;
    }

    100% {
      translate: 40px 30px;
      scale: 1.08;
    }
  }
}

.tnv-10 {
  width: 100%;
  min-height: 100svh;
}
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=Sora:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap">

What changed in the port

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

  • The orbs' :nth-child size and timing rules became per-element utilities plus three minted animate-tnv10-* tokens.
  • The -webkit-backdrop-filter duplicate is gone: Tailwind's backdrop-blur-* emits both.
  • UI upgrade from the CSS original: added backdrop-saturate-150 and a specular inner edge, an @supports solid fallback, and a starting: entrance for the hero card.
  • Accessibility upgrade: the primary CTA is now an opaque white button (it was 15% white on glass), body copy rose from 70% to 80% white, and orbs stop under motion-reduce:.
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: Glassmorphism Navbar in Tailwind CSS
Source: https://codefronts.com/navigation/tailwind-css-navigation-menus/glassmorphism-navbar-tailwind-css/

A floating frosted-glass navbar over drifting aurora orbs, with a matching glass hero card. The glass is backdrop-blur-2xl backdrop-saturate-150 plus an inner specular highlight, and it falls back to a solid tinted surface via supports-[backdrop-filter:blur(1px)]: where blur isn't available. Orbs drift on three @theme animations and stop under reduced motion. Zero JavaScript.
## HTML
```html
<div class="tnv-10 relative isolate min-h-svh w-full overflow-hidden bg-tnv10-bg bg-[radial-gradient(ellipse_at_20%_50%,#3730a3_0%,transparent_50%),radial-gradient(ellipse_at_80%_20%,#7e22ce_0%,transparent_45%),radial-gradient(ellipse_at_60%_90%,#1d4ed8_0%,transparent_45%)] font-tnv10-sans text-white antialiased selection:bg-indigo-500 selection:text-white">
  <div aria-hidden="true" class="pointer-events-none absolute -top-24 -left-24 -z-10 size-[26rem] animate-tnv10-a rounded-full bg-indigo-500 opacity-50 blur-[70px] motion-reduce:animate-none"></div>
  <div aria-hidden="true" class="pointer-events-none absolute right-[10%] -bottom-20 -z-10 size-[22rem] animate-tnv10-b rounded-full bg-violet-600 opacity-45 blur-[70px] motion-reduce:animate-none"></div>
  <div aria-hidden="true" class="pointer-events-none absolute top-[40%] left-[60%] -z-10 size-72 animate-tnv10-c rounded-full bg-blue-600 opacity-45 blur-[70px] motion-reduce:animate-none"></div>
  <header class="sticky top-5 z-20 mx-4 mt-5 sm:mx-10">
    <nav aria-label="Main" class="mx-auto flex max-w-5xl items-center justify-between gap-4 rounded-[20px] border border-white/15 bg-tnv10-solid py-2.5 pr-2.5 pl-5 shadow-[0_8px_32px_rgb(0_0_0/0.25),inset_0_1px_0_rgb(255_255_255/0.25)] backdrop-blur-2xl backdrop-saturate-150 supports-[backdrop-filter:blur(1px)]:bg-white/10">
      <a href="#" class="flex items-center gap-2.5 text-lg font-bold tracking-[-0.02em]"><span class="grid size-8 place-items-center rounded-[10px] border border-white/20 bg-white/15 shadow-[inset_0_1px_0_rgb(255_255_255/0.3)]"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></span>Prism</a>
      <ul class="hidden items-center gap-0.5 text-sm font-semibold text-white/75 md:flex [&_a]:flex [&_a]:h-10 [&_a]:items-center [&_a]:rounded-xl [&_a]:px-4 [&_a]:transition-colors [&_a:hover]:bg-white/10 [&_a:hover]:text-white [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-white/60 [&_a[aria-current]]:bg-white/15 [&_a[aria-current]]:text-white [&_a[aria-current]]:shadow-[inset_0_1px_0_rgb(255_255_255/0.2)]">
        <li><a href="#" aria-current="page">Home</a></li><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Blog</a></li>
      </ul>
      <div class="flex items-center gap-2 text-sm font-semibold">
        <a href="#" class="hidden h-10 items-center rounded-xl border border-white/20 px-4 transition-colors hover:bg-white/10 sm:inline-flex">Log in</a>
        <a href="#" class="inline-flex h-10 items-center rounded-xl bg-white px-4 text-tnv10-bg shadow-[0_8px_24px_-8px_rgb(165_180_252/0.8)] transition hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Sign up free</a>
      </div>
    </nav>
  </header>
  <main class="relative grid min-h-[82svh] place-items-center px-5 py-20 text-center [&_code]:rounded [&_code]:bg-white/10 [&_code]:px-1.5 [&_code]:font-tnv10-mono [&_code]:text-[0.85em]">
    <div class="max-w-xl rounded-3xl border border-white/15 bg-tnv10-solid px-7 py-12 shadow-[0_24px_64px_rgb(0_0_0/0.3),inset_0_1px_0_rgb(255_255_255/0.2)] backdrop-blur-2xl backdrop-saturate-150 transition-[opacity,translate,scale] duration-700 ease-out supports-[backdrop-filter:blur(1px)]:bg-white/[0.08] starting:translate-y-4 starting:scale-[0.98] starting:opacity-0 sm:px-12">
      <h1 class="text-[clamp(2rem,5.5vw,3.25rem)] leading-[1.1] font-bold tracking-[-0.04em] text-balance">Design <span class="bg-linear-135 from-indigo-200 to-violet-300 bg-clip-text text-transparent">through glass</span></h1>
      <p class="mt-4 text-base/[1.7] text-white/80 text-pretty">The navbar and this card use <code>backdrop-blur-2xl</code> with <code>backdrop-saturate-150</code>, an inner specular edge, and a solid fallback where blur is unavailable.</p>
      <a href="#" class="mt-7 inline-flex min-h-12 items-center gap-2 rounded-2xl border border-white/25 bg-white/15 px-7 font-bold transition hover:bg-white/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Explore<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
      <ul class="mt-7 flex flex-wrap justify-center gap-2.5 text-[13px] font-semibold text-white/75 [&_b]:text-white [&>li]:rounded-full [&>li]:border [&>li]:border-white/12 [&>li]:bg-white/[0.07] [&>li]:px-4 [&>li]:py-2">
        <li><b>backdrop-blur</b> frost</li><li><b>saturate</b> colour</li><li><b>supports-</b> fallback</li>
      </ul>
    </div>
  </main>
</div>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tnv10-bg: #0a0a1a;
  --color-tnv10-bg: oklch(0.15 0.03 285);
  --color-tnv10-solid: #2a2850e6;
  --color-tnv10-solid: oklch(0.3 0.07 285 / 0.9);
  --font-tnv10-sans: 'Sora', system-ui, sans-serif;
  --font-tnv10-mono: 'JetBrains Mono', ui-monospace, monospace;
  --animate-tnv10-a: tnv10-drift 14s ease-in-out infinite alternate;
  --animate-tnv10-b: tnv10-drift 18s ease-in-out -4s infinite alternate-reverse;
  --animate-tnv10-c: tnv10-drift 11s ease-in-out -8s infinite alternate;

  @keyframes tnv10-drift {
    0% {
      translate: 0 0;
      scale: 1;
    }

    100% {
      translate: 40px 30px;
      scale: 1.08;
    }
  }
}

.tnv-10 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Glass needs something behind it. The aurora orbs are blurred circles animated on long, desynchronised loops, so the frost always has colour to refract:

<nav class="bg-tnv10-solid supports-[backdrop-filter:blur(1px)]:bg-white/10
  backdrop-blur-2xl backdrop-saturate-150 border border-white/15
  shadow-[0_8px_32px_rgb(0_0_0/0.25),inset_0_1px_0_rgb(255_255_255/0.25)]">

Three animations, not one with overrides. Tailwind's animate-* sets the animation shorthand, which would reset any separately set duration. Minting --animate-tnv10-a, -b, -c keeps each orb's timing explicit.

Make it yours

  • Stronger frost: backdrop-blur-3xl; tinted glass: supports-[backdrop-filter:blur(1px)]:bg-indigo-400/10.
  • Light theme: a pale gradient background with bg-white/50 glass and dark ink.
  • Calmer motion: lengthen the durations in the three --animate-tnv10-* tokens.

Gotchas — read before shipping

  • backdrop-filter only blurs what is painted behind the element; a fully opaque background hides the effect.
  • Large blurred, animated layers cost GPU time on low-end phones; three orbs is a sensible ceiling.
  • Glass over busy imagery can fail contrast; keep text on glass at full white and test against the brightest orb.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

backdrop-filter is supported in this whole range; the supports- fallback covers embedded webviews that disable it.

Techniques used in this demo

Utilitiesfirst-class utility or variant

backdrop-filtertw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →