About
Animated navigation bar on hover changes its UI with respect to colors and dynamics. Easy component to build and adapt, Customizable colors
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Navigation Menu to your project and fits it to your theme.
Code
How Navigation Menu is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client"
import { Home, Bell, Settings, User } from "lucide-react"
import { MenuBar } from "@/components/ui/navigation-menu"
export function MenuBarDemo() {
const menuItems = [
{
icon: <Home className="h-5 w-5" />,
label: "Home",
href: "#",
color: "primary",
},
{
icon: <Bell className="h-5 w-5" />,
label: "Notifications",
href: "#",
color: "orange",
},
{
icon: <Settings className="h-5 w-5" />,
label: "Settings",
href: "#",
color: "green",
},
{
icon: <User className="h-5 w-5" />,
label: "Profile",
href: "#",
color: "red",
},
]
return (
<div className="p-6 flex justify-center">
<MenuBar items={menuItems} />
</div>
)
}
export default MenuBarDemo
Dependencies
More by Kousthubha Yadiyala
View all
Morphing Card Stack
1.8K
Animated Menu
603
Circular Command Menu
466
Fluid Dropdown
421
Trello Kanban Board
317
Real time Analytics
287
Shatter Button
276
Action Searchbar
221
More in Navigation
View all
Sidebar
235
Navbar with Theme Toggle
43
Sidebar
339
Tabs
60
Numberless Pagination with Text
11
Oversized 404 Numeral
50
Footer
446
Pagination
43
