NavigationGlassmorphism Navbar

Glassmorphism Navbar

Elegant glassmorphism navbar with mouse-following glow, dropdown menus, and smooth GSAP animations.

Installation

$ npx @nehal712521/inprogress add navbar-glass

Preview

Hover over Products to see dropdown

Usage

import { GlassmorphismNavbar } from "@/components/ui/navbar-glass";

export default function Page() {
    const navItems = [
        { label: "Home", href: "/" },
        {
            label: "Products",
            href: "#",
            children: [
                { label: "Software", href: "/products/software", description: "Our software solutions" },
                { label: "Hardware", href: "/products/hardware", description: "Hardware products" },
            ]
        },
        { label: "About", href: "/about" },
    ];

    return (
        <GlassmorphismNavbar
            items={navItems}
            ctaButton={{ label: "Get Started", href: "/signup" }}
        />
    );
}

Props

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

Features

Glassmorphism

Frosted glass effect with backdrop blur

Mouse Glow

Glow effect follows mouse cursor

Dropdown Menus

Animated dropdown with descriptions

Mobile Responsive

Collapsible menu for mobile devices