Shadcn UI Navbar Block
Navbar33 is a floating fixed navigation bar centered at the top of the viewport. It features a logo on the left, navigation links with optional dropdown menus in the center, and a login button on the right. The navbar has a glassmorphism effect with semi-transparent background and backdrop blur.
The visual treatment uses rounded corners (rounded-4xl), a subtle border, and backdrop-blur-md for the frosted glass effect. Navigation items use shadcn NavigationMenu for dropdown functionality with hover animations that translate items to the right. The mobile hamburger menu uses animated spans that transform into an X when open.
This navbar exemplifies the mainline design system with its clean, floating aesthetic. The constrained max-width (700px) keeps the navbar compact and centered. The glassmorphism effect creates depth without heavy shadows. Dropdown content has a subtle translate animation on hover for polish.
On mobile, the hamburger button reveals a full-width dropdown menu below the navbar. Dropdown sections expand with smooth height animations. The mobile menu has a separate rounded container with the same border styling as the navbar.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
| lucide-react | NPM |
button @shadcn | Registry |
navigation-menu @shadcn | Registry |