Navbar Flow

Navigation

About

An animated top navbar with flowing SVG gradient connections, hover dropdown submenus, and a collapsible mobile menu.

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

Code

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

Usage.tsx

import NavbarFlow, {
  FeatureItem,
  HoverLink,
} from "@/components/ui/navbar-flow";

export default function NavbarFlowDemo() {
  return (
    <div className="w-full">
      <NavbarFlow
        emblem={<span className="font-bold text-lg">Acme</span>}
        links={[
          {
            text: "Products",
            submenu: (
              <div className="flex flex-col space-y-2">
                <HoverLink url="#">Analytics</HoverLink>
                <HoverLink url="#">Automation</HoverLink>
                <FeatureItem
                  heading="Integrations"
                  url="#"
                  info="Connect with your favorite tools"
                />
              </div>
            ),
          },
          { text: "Pricing", url: "#" },
          { text: "About", url: "#" },
        ]}
        rightComponent={
          <a
            href="#"
            className="px-4 py-2 rounded-full bg-gray-900 text-white dark:bg-white dark:text-black text-sm font-medium"
          >
            Sign in
          </a>
        }
      />
    </div>
  );
}