Navbars
10 production-ready navigation bars — from floating pills to brutalist banners. Every variant is live, interactive, and copy-paste ready. No JS required for most styles.
All navbars are fully responsive. Click Copy HTML on any card to grab the code. Hover links inside the previews to see transition effects.
Frosted GlassDarkGlassmorphism
Minimal LightLightUnderline
Floating PillDarkCentered
Tabbed Dashboard BarDarkApp-style
Bold SplitTwo-toneAgency
Centered LogoDarkSymmetrical
Gradient BorderDarkAnimated
BrutalistLightBold
Dot AccentDarkWith Search
Dashboard App BarDarkRichNew
1. Frosted Glass
HTML + CSS
<!-- Frosted Glass Navbar -->
<nav class="flex items-center justify-between
bg-white/[0.04] backdrop-blur-xl border border-white/[0.08]
rounded-xl px-5 py-3">
<!-- Logo -->
<div class="flex items-center gap-1.5 font-black text-white text-base">
<div class="w-2 h-2 rounded-full bg-yellow-400 shadow-[0_0_8px_#e8ff47]"></div>
Acme
</div>
<!-- Links -->
<div class="flex gap-1">
<a href="#" class="text-sm px-3 py-1.5 rounded-lg hover:bg-white/[0.07] transition-colors text-white/55">Home</a>
<a href="#" class="text-sm px-3 py-1.5 rounded-lg hover:bg-white/[0.07] transition-colors text-white/55">Products</a>
<a href="#" class="text-sm px-3 py-1.5 rounded-lg hover:bg-white/[0.07] transition-colors text-white/55">Pricing</a>
</div>
<!-- CTA -->
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-yellow-400 to-emerald-400"></div>
<button class="bg-yellow-400 text-black font-bold text-xs px-4 py-1.5 rounded-lg">Get Started</button>
</div>
</nav>3. Floating Pill
HTML
<div class="flex justify-center">
<nav class="flex items-center gap-1 bg-zinc-900 border border-white/10 rounded-full px-4 py-1.5 shadow-[0_8px_32px_rgba(0,0,0,0.6)]">
<span class="font-black text-white text-sm mr-2">⬡</span>
<a href="#" class="text-xs px-3.5 py-1.5 rounded-full text-white/50 hover:text-white hover:bg-white/[0.07] transition-all">Home</a>
<a href="#" class="text-xs px-3.5 py-1.5 rounded-full bg-yellow-400 text-black font-semibold">Explore</a>
<a href="#" class="text-xs px-3.5 py-1.5 rounded-full text-white/50 hover:text-white hover:bg-white/[0.07] transition-all">Pricing</a>
<button class="ml-2 text-xs font-bold bg-white/90 text-black px-4 py-1.5 rounded-full">Sign up</button>
</nav>
</div>7. Animated Gradient Border
HTML + CSS
<!-- Gradient border needs custom CSS keyframe -->
<div class="p-[1.5px] rounded-xl nav-grad-wrap">
<nav class="bg-[#0d0d1a] rounded-[10px] flex items-center justify-between px-5 py-2.5">
<span class="font-black text-white text-sm">⬡ Gradient</span>
<div class="flex gap-1">
<a href="#" class="text-xs text-white/50 hover:text-white px-3 py-1.5 rounded-md transition-colors">Features</a>
<a href="#" class="text-xs text-white/50 hover:text-white px-3 py-1.5 rounded-md transition-colors">Pricing</a>
</div>
<button class="text-xs font-bold px-4 py-1.5 rounded-lg bg-gradient-to-r from-yellow-400 to-emerald-400 text-black">Start free →</button>
</nav>
</div>
/* Required CSS */
.nav-grad-wrap {
background: linear-gradient(90deg, #e8ff47, #47ffb2, #ff6b47, #e8ff47);
background-size: 300% 100%;
animation: grad-shift 4s linear infinite;
}
@keyframes grad-shift {
0% { background-position: 0%; }
100% { background-position: 300%; }
}8. Brutalist
HTML
<nav class="flex items-stretch border-b-[3px] border-black bg-[#f0ede6]">
<div class="px-6 py-3.5 border-r-[3px] border-black bg-yellow-400 font-black text-lg tracking-tight">BRUT</div>
<div class="flex">
<a href="#" class="px-5 flex items-center text-[11px] font-bold uppercase tracking-widest border-r border-black/10 bg-black text-yellow-400">Work</a>
<a href="#" class="px-5 flex items-center text-[11px] font-bold uppercase tracking-widest border-r border-black/10 hover:bg-black hover:text-[#f0ede6] transition-colors">About</a>
<a href="#" class="px-5 flex items-center text-[11px] font-bold uppercase tracking-widest border-r border-black/10 hover:bg-black hover:text-[#f0ede6] transition-colors">Blog</a>
</div>
<div class="ml-auto flex items-center px-5">
<button class="bg-black text-yellow-400 font-black text-[11px] uppercase tracking-wider px-5 py-2">Contact</button>
</div>
</nav>All Navbar Variants
| # | Name | Theme | Best For | Special Effect |
|---|---|---|---|---|
| 1 | Frosted Glass | Dark | SaaS, Apps | Backdrop blur |
| 2 | Minimal Light | Light | Agency, Portfolio | Underline active |
| 3 | Floating Pill | Dark | Landing pages | Pill active highlight |
| 4 | Tabbed Dashboard | Dark | Admin panels | Border-bottom tabs |
| 5 | Bold Split | Two-tone | Creative agency | Dark/light split |
| 6 | Centered Logo | Dark | Fashion, Luxury | Symmetric layout |
| 7 | Gradient Border | Dark | AI, Startup | Animated gradient |
| 8 | Brutalist | Light | Editorial, Art | Hard borders, uppercase |
| 9 | Dot Accent | Dark | Dev, Portfolio | Dot separator + search |
| 10 | Dashboard App Bar | Dark | SaaS dashboards | Breadcrumb + notif badge |
Customization Tips
All navbars use semantic Tailwind classes. Common things to change:
Swap accent color: Replace
Make it sticky: Add
Add blur on scroll: Use a tiny JS scroll listener to toggle
yellow-400 / #e8ff47 with any Tailwind color like blue-500, violet-500, or rose-400.Make it sticky: Add
fixed top-0 left-0 right-0 z-50 to any navbar wrapper.Add blur on scroll: Use a tiny JS scroll listener to toggle
backdrop-blur-lg bg-black/60 classes dynamically.