24 Tailwind Liquid Glass Navbars
02 / 24

All 24 in 24 Tailwind Liquid Glass Navbars

  1. 01Tailwind iOS 26 Floating Tab Bar
  2. 02Tailwind macOS Tahoe Menu Bar
  3. 03Tailwind Safari Toolbar with SVG Refraction
  4. 04Tailwind visionOS Glass Navbar
  5. 05Tailwind Liquid Glass Bottom Accessory Bar
  6. 06Tailwind Dynamic Island Morphing Nav
  7. 07Tailwind Liquid Glass Navbar (Canonical)
  8. 08Tailwind Responsive Glass Navbar with Burger
  9. 09Tailwind Next.js Sticky Glass Header
  10. 10Tailwind Spring Glide Menu (Framer Motion Port)
  11. 11Tailwind CSS Variables Glass Theme Generator
  12. 12Tailwind Glass Override for Bootstrap 5 Navbars
  13. 13Tailwind Scroll-Opacity Sticky Navbar
  14. 14Tailwind Inner-Glow Glass Nav Links
  15. 15Tailwind Cursor-Lens Glass Nav (GSAP-ready)
  16. 16Tailwind Animated Gradient Blobs Glass Navbar
  17. 17Tailwind Sliding Capsule Tab Bar (group-has)
  18. 18Tailwind Reflective Glass Sidebar
  19. 19Tailwind Fallback-First Glass Navbar
  20. 20Tailwind High-Contrast Accessible Glass Navbar
  21. 21Tailwind Light / Dark Liquid Glass Navbar
  22. 22Tailwind Performance-Tuned Glass Navbar
  23. 23Tailwind Minimalist Dual-Border Glass Header
  24. 24Tailwind Responsive Glass Sidebar to Bottom Tabs
Tailwind v4MIT licensed

Tailwind macOS Tahoe Menu Bar

The razor-thin translucent strip from macOS Tahoe, and the cleanest port in the collection: not one rule survives into a stylesheet. Every property — the 34px height, the blur(30px) saturate(180%) frost, the hairline bottom border, the inset top rim, the margin-inline-start:auto status cluster — has a utility, so the whole menu bar is markup plus a four-line @theme block.

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="nbtw-02 relative block w-full min-h-svh overflow-hidden font-nb02-sans bg-[radial-gradient(120%_90%_at_20%_0%,#ff9d6c,#c14bd6_45%,#3b2a86_100%)]" aria-label="macOS Tahoe menu bar demo">
  <header class="sticky top-0 z-[5] flex items-center gap-1 h-[34px] px-3 text-white bg-[color-mix(in_oklab,white_14%,transparent)] border-b border-white/[0.28] shadow-[inset_0_1px_0_rgba(255,255,255,.4)] backdrop-blur-[30px] backdrop-saturate-[1.8] [text-shadow:0_1px_3px_rgba(0,0,0,.25)]">
    <span class="text-[17px] mr-1" aria-hidden="true">◐</span>
    <nav class="flex items-center" aria-label="Menu bar">
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] font-bold text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Lumen</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">File</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Edit</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">View</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Window</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Help</button>
    </nav>
    <div class="ms-auto flex items-center gap-3.5 text-[13px]">
      <span class="opacity-95 cursor-default" title="Wi-Fi" aria-label="Wi-Fi">▲</span>
      <span class="opacity-95 cursor-default" title="Battery" aria-label="Battery">▮</span>
      <span class="opacity-95 cursor-default" title="Search" aria-label="Search">⌕</span>
      <span class="font-semibold tabular-nums">Wed 9:41 AM</span>
    </div>
  </header>
  <div class="h-[calc(100svh-34px)] grid place-items-center">
    <span class="text-[clamp(48px,12vw,96px)] font-extrabold tracking-[-0.04em] text-white/[0.14]">Tahoe</span>
  </div>
</section>
@import "tailwindcss";

@theme {
  --font-nb02-sans: -apple-system, system-ui, 'Segoe UI', sans-serif;
}

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 {
  --font-nb02-sans: -apple-system, system-ui, 'Segoe UI', sans-serif;
}

What changed in the port

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

  • Zero rules left over. Every declaration in the hand-written version has a utility, so the stylesheet is the Tailwind import plus one font token — the clearest case in the collection for porting a bar rather than keeping it as CSS.
  • ms-auto replaces margin-inline-start:auto exactly, and being the logical property it keeps the status cluster on the trailing edge under RTL with no second rule.
  • hover: and focus-within: are typed as a pair on every menu title, which makes the keyboard state impossible to forget when you copy a title to add a new menu.
  • The 34px height is a bracket value rather than a spacing-scale step, because it is a real piece of OS chrome geometry, not a design-scale rhythm.
  • tabular-nums is a utility, so the clock stops jittering without a font-variant rule.
  • The wallpaper is a radial-gradient arbitrary background on the root: the frost has to have something coloured underneath or the whole effect is invisible.
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 macOS Tahoe Menu Bar
Source: https://codefronts.com/navigation/tailwind-liquid-glass-navbars/tailwind-macos-tahoe-menu-bar/

The razor-thin translucent strip from macOS Tahoe, and the cleanest port in the collection: not one rule survives into a stylesheet. Every property &mdash; the 34px height, the blur(30px) saturate(180%) frost, the hairline bottom border, the inset top rim, the margin-inline-start:auto status cluster &mdash; has a utility, so the whole menu bar is markup plus a four-line @theme block.
## HTML
```html
<section class="nbtw-02 relative block w-full min-h-svh overflow-hidden font-nb02-sans bg-[radial-gradient(120%_90%_at_20%_0%,#ff9d6c,#c14bd6_45%,#3b2a86_100%)]" aria-label="macOS Tahoe menu bar demo">
  <header class="sticky top-0 z-[5] flex items-center gap-1 h-[34px] px-3 text-white bg-[color-mix(in_oklab,white_14%,transparent)] border-b border-white/[0.28] shadow-[inset_0_1px_0_rgba(255,255,255,.4)] backdrop-blur-[30px] backdrop-saturate-[1.8] [text-shadow:0_1px_3px_rgba(0,0,0,.25)]">
    <span class="text-[17px] mr-1" aria-hidden="true">◐</span>
    <nav class="flex items-center" aria-label="Menu bar">
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] font-bold text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Lumen</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">File</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Edit</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">View</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Window</button>
      <button class="min-h-[26px] px-[11px] py-[5px] rounded-[7px] text-[13.5px] text-white bg-transparent border-0 cursor-pointer transition-colors duration-150 hover:bg-white/[0.22] focus-within:bg-white/[0.22] focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-1" type="button">Help</button>
    </nav>
    <div class="ms-auto flex items-center gap-3.5 text-[13px]">
      <span class="opacity-95 cursor-default" title="Wi-Fi" aria-label="Wi-Fi">▲</span>
      <span class="opacity-95 cursor-default" title="Battery" aria-label="Battery">▮</span>
      <span class="opacity-95 cursor-default" title="Search" aria-label="Search">⌕</span>
      <span class="font-semibold tabular-nums">Wed 9:41 AM</span>
    </div>
  </header>
  <div class="h-[calc(100svh-34px)] grid place-items-center">
    <span class="text-[clamp(48px,12vw,96px)] font-extrabold tracking-[-0.04em] text-white/[0.14]">Tahoe</span>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --font-nb02-sans: -apple-system, system-ui, 'Segoe UI', sans-serif;
}
```

How this works

This is the demo that proves the port is not a compromise. The hand-written version is 13 CSS rules. Here the stylesheet is @import "tailwindcss" plus a font token, and everything else is in the class lists:

class="sticky top-0 z-5 flex items-center gap-1 h-[34px] px-3
       text-white bg-[color-mix(in_oklab,white_14%,transparent)]
       border-b border-white/[0.28]
       shadow-[inset_0_1px_0_rgba(255,255,255,.4)]
       backdrop-blur-[30px] backdrop-saturate-[1.8]"

The frost only exists over something. The desktop behind is a radial wallpaper gradient, and the bar is sticky rather than fixed so it reserves its 34px in flow — the same zero-CLS discipline the CSS version keeps.

Menu titles are buttons, not divs. Each is a real <button> with hover: and focus-within: frost and a focus-visible: ring, which is what makes a decorative-looking strip actually operable. The app title is the same class list plus font-bold.

The status cluster needs no positioning. ms-auto pushes it to the trailing edge as a flex spacer, and it stays correct in RTL because the utility is the logical property, not margin-left.

Make it yours

  • Flip to a dark menu bar by swapping the fill to bg-[color-mix(in_oklab,black_24%,transparent)] and dropping the text-shadow.
  • Dial the wallpaper blend with backdrop-blur-[20px] through [40px] — higher reads as thicker glass, lower lets more wallpaper detail through.
  • Promote the fill and rim to @theme colours if you need the same glass on several bars; that is what makes bg-nb02-glass possible.
  • Wire the titles to real menus with the popover attribute; the capsule styling needs no change.
  • Raise the strip to 38px (h-[38px]) for touch-adjacent contexts — the type scale and rim survive it unchanged.

Gotchas — read before shipping

  • The strip only blends over an image or gradient. Over a flat colour backdrop-blur is invisible and the bar just looks like a tinted div.
  • border-white/[0.28] needs the bracket form for the two-decimal alpha; border-white/28 is a different value (28%, which reads heavier here).
  • Keep focus-visible: rings on the titles. A menu bar is the easiest place to lose keyboard users, because nothing about it looks focusable at rest.
  • gap-1 plus per-title padding is what keeps the row a single line at every width — do not add margins to the titles, or the flex spacer maths drifts.
  • 13.5px type over a bright wallpaper needs the text-shadow. Drop it only if you also raise the fill opacity.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Tailwind v4 sets the floor. The bar itself degrades gracefully: without backdrop-filter support it renders as a lightly tinted solid strip that still reads as menu-bar chrome.

Techniques used in this demo

HTML & JSno Tailwind involved

aria-* attributestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →