Navbar

Navigation 303

About

Navbar with hover animation effect

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Navbar to your project and fits it to your theme.

Code

How Navbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import NavBar from "@/components/ui/navbar"

const menus = [
  {
    id: 1,
    title: 'Home',
    url: '/',
    dropdown: false,
  },
  {
    id: 2,
    title: 'Products',
    url: '/products',
    dropdown: true,
    items: [
      {
        id: 21,
        title: 'Electronics',
        url: '/products/electronics',
      },
      {
        id: 22,
        title: 'Clothing',
        url: '/products/clothing',
      },
      {
        id: 23,
        title: 'Accessories',
        url: '/products/accessories',
      },
    ],
  },
  {
    id: 3,
    title: 'Services',
    url: '/services',
    dropdown: true,
    items: [
      {
        id: 31,
        title: 'Consulting',
        url: '/services/consulting',
      },
      {
        id: 32,
        title: 'Support',
        url: '/services/support',
      },
    ],
  },
  {
    id: 4,
    title: 'About Us',
    url: '/about',
    dropdown: false,
  },
  {
    id: 5,
    title: 'Contact',
    url: '/contact',
    dropdown: false,
  },
];

export function NavBarDemo() {
  return <NavBar list={menus} />
}