NavigationFloating Navbar
Floating Navbar
Modern floating navbar with scroll-aware styling, staggered animations, and mobile-responsive design using GSAP.
Installation
$ npx @nehal712521/inprogress add navbar-floating
Preview
Scroll to see the navbar effect
Usage
import { FloatingNavbar } from "@/components/ui/navbar-floating";
export default function Page() {
const navItems = [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "Services", href: "/services" },
{ label: "Contact", href: "/contact" },
];
return (
<FloatingNavbar
items={navItems}
ctaButton={{ label: "Get Started", href: "/signup" }}
/>
);
}Props
| Prop | Type | Default |
|---|---|---|
| items | NavItem[] | Default items |
| logo | ReactNode | "Logo" text |
| ctaButton | { label, href } | undefined |
| className | string | "" |
Features
Scroll-aware
Changes style based on scroll position
GSAP Animations
Smooth entry and stagger animations
Mobile Responsive
Collapsible mobile menu with animations
Hover Effects
Scale and color transitions on hover