Sections
Navbar
Navbar
Top navigation bars.
Simple Navbar
Logo
<header class="border-b bg-background w-full"><div class="container mx-auto flex h-16 items-center justify-between px-4"><div class="font-bold text-xl">Logo</div><nav class="hidden md:flex gap-6"><a href="#" class="text-sm font-medium hover:text-primary">Home</a><a href="#" class="text-sm font-medium hover:text-primary">About</a></nav><button class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header><header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-primary">Home</a><a href="#" className="text-sm font-medium hover:text-primary">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>Centered Navbar
Logo
<header class="border-b bg-background w-full"><div class="container mx-auto flex h-16 items-center px-4"><nav class="hidden md:flex gap-6 flex-1"><a href="#" class="text-sm font-medium hover:text-primary">Home</a></nav><div class="font-bold text-xl flex-1 text-center">Logo</div><div class="flex-1 flex justify-end"><button class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></div></header><header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center px-4"><nav className="hidden md:flex gap-6 flex-1"><a href="#" className="text-sm font-medium hover:text-primary">Home</a></nav><div className="font-bold text-xl flex-1 text-center">Logo</div><div className="flex-1 flex justify-end"><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></div></header>Navbar with Search
Logo
<header class="border-b bg-background w-full"><div class="container mx-auto flex h-16 items-center gap-4 px-4"><div class="font-bold text-xl">Logo</div><div class="flex-1 max-w-md mx-auto hidden md:block"><input class="w-full h-10 px-3 rounded-md border" placeholder="Search..." /></div><button class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header><header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center gap-4 px-4"><div className="font-bold text-xl">Logo</div><div className="flex-1 max-w-md mx-auto hidden md:block"><input className="w-full h-10 px-3 rounded-md border" placeholder="Search..." /></div><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>Dark Navbar
Logo
<header class="bg-slate-900 text-white w-full"><div class="container mx-auto flex h-16 items-center justify-between px-4"><div class="font-bold text-xl">Logo</div><nav class="hidden md:flex gap-6"><a href="#" class="text-sm font-medium hover:text-blue-400">Home</a><a href="#" class="text-sm font-medium hover:text-blue-400">About</a></nav><button class="bg-white text-slate-900 px-4 py-2 rounded-md text-sm">Sign In</button></div></header><header className="bg-slate-900 text-white w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-blue-400">Home</a><a href="#" className="text-sm font-medium hover:text-blue-400">About</a></nav><button className="bg-white text-slate-900 px-4 py-2 rounded-md text-sm">Sign In</button></div></header>Floating Navbar
Logo
<div class="p-4 bg-muted/20 w-full"><header class="bg-background rounded-full shadow-lg border w-full max-w-4xl mx-auto"><div class="px-6 flex h-14 items-center justify-between"><div class="font-bold">Logo</div><nav class="hidden md:flex gap-6"><a href="#" class="text-sm font-medium">Home</a><a href="#" class="text-sm font-medium">About</a></nav><button class="bg-primary text-primary-foreground px-4 py-1.5 rounded-full text-sm">Sign In</button></div></header></div><div className="p-4 bg-muted/20 w-full"><header className="bg-background rounded-full shadow-lg border w-full max-w-4xl mx-auto"><div className="px-6 flex h-14 items-center justify-between"><div className="font-bold">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium">Home</a><a href="#" className="text-sm font-medium">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-1.5 rounded-full text-sm">Sign In</button></div></header></div>