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
610
Circular Command Menu
470
Fluid Dropdown
426
Trello Kanban Board
318
Real time Analytics
289
Shatter Button
276
Action Searchbar
223
More in Navigation
View all
Sidebar
286
Navbar
1
Tabs
15
Sidebar
348
Numberless Pagination with Text
11
Pagination
108
Oversized 404 Numeral
57
Breadrcrumb
4
