Glass Navbar

A modern, responsive glassmorphic navbar with smooth spring navigation pills, mobile menu drawer, and keyboard accessibility.

Installation

Add the component directly to your repository using shadcn CLI:

npx shadcn@latest add Surajmaurya1/easyui/glass-navbar

API Reference

PropTypeDefaultDescription
brandReact.ReactNode<EasyUILogo />Brand / Logo element or text component
brandHrefstring'/'Root link destination for the brand logo
itemsNavItem[]Default items arrayArray of navigation links with label, href, badge, icon
ctaReact.ReactNode<GetStartedButton />Right-hand side action slot / CTA button
activeIdstringundefinedExplicit active item identifier or label
variant'floating' | 'full-width''floating'Visual style layout structure
stickybooleantruePins the navigation bar to the top of the viewport
glassbooleantrueEnables backdrop-blur glassmorphism background
onItemSelect(item: NavItem) => voidundefinedCallback fired when any nav item is selected