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

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

PropTypeDefault
itemsNavItem[]Default items
logoReactNode"Logo" text
ctaButton{ label, href }undefined
classNamestring""

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