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
611
Circular Command Menu
472
Fluid Dropdown
427
Trello Kanban Board
319
Real time Analytics
290
Shatter Button
276
Action Searchbar
223
More in Navigation
View all
Sidebar
297
Progress Bar Stepper
45
Navbar
1
Tabs
16
Breadcrumb
103
Capsule Tabs
21
Pagination
27
Pagination with Ellipsis
18
