Floating Navbar
A sticky floating navbar built with React and Tailwind CSS that animates into view on scroll. Fully responsive, accessible, and free to copy into any project.
EHomeWorkAboutHire
Copy the code
export function FloatingNavbar() {
return (
<nav className="inline-flex items-center gap-1 rounded-full border border-white/15
bg-white/5 p-2 backdrop-blur-md text-white">
<span className="px-3 font-extrabold">E</span>
{['Home','Work','About'].map((l,i) => (
<a key={l} href="#" className={`rounded-full px-3 py-1.5 text-sm ${i===0?'bg-violet-600':'hover:bg-white/10'}`}>{l}</a>
))}
<a href="#" className="rounded-full bg-white px-4 py-1.5 text-sm font-bold text-black">Hire</a>
</nav>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the floating navbar
This floating navbar is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.