An animated top navbar with flowing SVG gradient connections, hover dropdown submenus, and a collapsible mobile menu.
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>
);
}