How to Build a Floating Navbar in React + Tailwind (2026 Guide)
Learn how to build a beautiful floating navbar in React and Tailwind CSS with smooth scroll detection, blur effects, and Empire UI style presets.
What Is a Floating Navbar?
A floating navbar is a navigation bar that appears to hover above the page content rather than sitting flush against the top edge of the viewport. It typically features rounded corners, a translucent or frosted-glass background, a subtle shadow, and smooth scroll-based transitions — giving your app a polished, modern feel.
Unlike a traditional sticky header that spans the full width of the screen, a floating navbar is narrower, centered, and detaches from the edges with visible margin. This design pattern has become extremely popular in 2025–2026, especially in SaaS landing pages, portfolio sites, and AI product dashboards.
The floating navbar pattern pairs beautifully with styles like glassmorphism, neumorphism, and neobrutalism — all of which are available as ready-made presets in Empire UI. If you want to skip the build entirely and grab a production-ready component, head over to the Empire UI templates library.
Project Setup: React + Tailwind CSS
Before writing any component code, make sure you have a React project with Tailwind CSS configured. If you are starting from scratch, the fastest path is npx create-next-app@latest my-app --tailwind which scaffolds a Next.js project with Tailwind already wired up.
Install any peer dependencies you might need. For scroll detection we will use a simple useState + useEffect hook — no extra libraries required. For icon support, lucide-react is a lightweight option: npm install lucide-react.
Once your environment is ready, create a new file at components/FloatingNavbar.tsx. Everything in this guide lives inside that single file, keeping the component self-contained and portable across projects.
Building the Floating Navbar Component
The core idea is simple: listen to the window.scrollY value and toggle a CSS class that adds the floating appearance once the user has scrolled past a threshold. We also track whether a mobile menu is open.
Here is the complete component with Tailwind classes, scroll detection, and a mobile-friendly toggle:
``tsx
'use client';
import { useState, useEffect } from 'react';
import { Menu, X } from 'lucide-react';
const links = [
{ label: 'Home', href: '/' },
{ label: 'Templates', href: '/templates' },
{ label: 'Cursors', href: '/cursors' },
{ label: 'Blog', href: '/blog' },
];
export default function FloatingNavbar() {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const handleScroll = () => setScrolled(window.scrollY > 20);
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<header className="fixed top-0 left-0 right-0 z-50 flex justify-center px-4 pt-4">
<nav
className={flex items-center justify-between w-full max-w-4xl px-6 py-3 rounded-2xl transition-all duration-300 ${
scrolled
? 'bg-white/10 backdrop-blur-md border border-white/20 shadow-lg'
: 'bg-transparent'
}}
>
{/* Logo */}
<span className="text-white font-bold text-lg tracking-tight">
Empire UI
</span>
{/* Desktop Links */}
<ul className="hidden md:flex gap-6">
{links.map((link) => (
<li key={link.href}>
<a
href={link.href}
className="text-white/80 hover:text-white text-sm font-medium transition-colors"
>
{link.label}
</a>
</li>
))}
</ul>
{/* CTA */}
<a
href="/templates"
className="hidden md:inline-flex items-center px-4 py-2 rounded-xl bg-white/20 hover:bg-white/30 text-white text-sm font-semibold transition-colors"
>
Get Started
</a>
{/* Mobile Toggle */}
<button
className="md:hidden text-white"
onClick={() => setMenuOpen((prev) => !prev)}
aria-label="Toggle menu"
>
{menuOpen ? <X size={22} /> : <Menu size={22} />}
</button>
</nav>
{/* Mobile Drawer */}
{menuOpen && (
<div className="absolute top-full mt-2 left-4 right-4 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 shadow-lg p-4">
<ul className="flex flex-col gap-3">
{links.map((link) => (
<li key={link.href}>
<a
href={link.href}
className="block text-white/90 hover:text-white text-sm font-medium"
onClick={() => setMenuOpen(false)}
>
{link.label}
</a>
</li>
))}
</ul>
</div>
)}
</header>
);
}
``
Let's unpack the key decisions. The fixed top-0 left-0 right-0 on the outer <header> pins it to the viewport without removing it from the stacking context. The inner <nav> uses max-w-4xl to constrain width and rounded-2xl to give it that floating pill shape. The scrolled state toggles bg-white/10 backdrop-blur-md — the glassmorphism backdrop that makes the navbar appear to float above content.
Styling Variants with Empire UI
The example above uses a glassmorphism style, but Empire UI gives you 40 visual presets out of the box. If your brand leans toward neobrutalism or claymorphism, you can swap the Tailwind classes in seconds rather than rebuilding from scratch.
For a neobrutalist floating navbar, replace the backdrop-blur-md bg-white/10 border-white/20 classes with bg-yellow-300 border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]. The shadow gives the iconic hard offset that defines the neobrutalist aesthetic.
For neumorphism, use a light-grey background with inset box shadows: bg-[#e0e5ec] shadow-[6px_6px_12px_#b8bec7,-6px_-6px_12px_#ffffff]. Explore the full set of style tokens and copy-paste components at Empire UI's glassmorphism hub and the broader templates directory.
Empire UI's MCP server can also generate a themed floating navbar component for you automatically. Just describe the style you want in plain language and the MCP tool returns a ready-to-paste React component with matching Tailwind classes — ideal for AI-native workflows.
Accessibility and Performance Tips
Accessibility is non-negotiable. Always add aria-label to icon-only buttons (as shown on the mobile toggle above). Use a <nav> landmark element and ensure every link has visible focus styles — Tailwind's focus-visible:ring-2 focus-visible:ring-white utility works well here.
For performance, the scroll listener uses { passive: true } which tells the browser it will never call preventDefault(), allowing it to optimise scroll handling on mobile. Debouncing is unnecessary here because useState batches updates efficiently in React 18+.
If you are rendering this in Next.js App Router, the 'use client' directive at the top of the file is required since useEffect and useState are client-side APIs. The rest of your page can remain a server component, keeping the overall bundle lean.
Want to add a custom cursor to complement the floating navbar? Check out Empire UI's cursor collection — dozens of animated cursor presets that integrate with a single component import.
Extending the Component
A few popular extensions are worth knowing. Active link highlighting can be achieved by comparing link.href against usePathname() from next/navigation and adding a text-white or underline class when they match.
Smooth hide-on-scroll-down / show-on-scroll-up behaviour (popularised by large-scale apps) requires tracking the previous scroll position. Store prevScrollY in a useRef and compare it to the current value inside the scroll handler — hide the navbar when scrolling down fast, reveal it when scrolling up.
For animated entrance, wrap the <header> in a Framer Motion motion.header with initial={{ y: -80, opacity: 0 }} and animate={{ y: 0, opacity: 1 }}. This gives users a polished first impression on page load.
You can find more advanced animation patterns across the Empire UI blog — including animated tabs, moving borders, and spotlight effects that pair perfectly with a floating navbar to create a cohesive, high-end interface.
FAQ
A sticky navbar stays fixed at the very top edge of the viewport spanning the full browser width. A floating navbar detaches from the edges, is centered with horizontal margins, and typically has rounded corners and a translucent background — giving it a visually elevated, hovering appearance.
No external libraries are required for the core functionality. React's built-in useState and useEffect hooks handle scroll detection, and Tailwind CSS provides all the styling utilities. Lucide React is optional for icons.
Add the 'use client' directive at the very top of the component file, before any imports. This is required because the component uses useEffect and useState, which are client-side APIs not available during server-side rendering.
Yes. Empire UI offers a ready-made floating navbar component styled across multiple visual presets including glassmorphism, neobrutalism, and claymorphism. Visit the templates library at empire-ui.com/templates to browse and copy the component code.
Apply the Tailwind classes backdrop-blur-md bg-white/10 border border-white/20 to the navbar element. The backdrop-blur-md class creates the frosted-glass blur effect, while bg-white/10 adds the semi-transparent white tint that defines the glassmorphism style.