Floating Navbar
Animated navbar that floats and appears/disappears based on scroll direction.
Preview
Floating Navbar
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Alternative navigation pattern for landing pages.
Why this component matters
Earn every pixel. The floating navbar reclaims vertical space when scrolling down, reappearing when the user scrolls up (intent to navigate).
Usage guidance
Use for marketing/landing pages with linear content flow. Not recommended for app-style interfaces where persistent nav is expected.
Installation
bash
npx shadcn@latest add @aceternity/floating-navbarUsage
example.tsxtsx
import { FloatingNavbar } from "@/components/ui/floating-navbar";
export default function Example() {
return (
<FloatingNavbar>
{/* Your content here */}
</FloatingNavbar>
);
}Source
floating-navbar.tsx
components/ui/floating-navbar.tsx