Library

Mega Menu Navbar

Mega Menu Navbar

Full-width navbar with animated dropdown panels. Menu items with chevron indicators reveal rich submenu grids with icons and descriptions.

navbarmega-menudropdownsubmenu

Installation

bash
# Copy mega-menu-navbar.tsx to your project
cp components/ui/mega-menu-navbar.tsx your-project/components/ui/mega-menu-navbar.tsx

How to use

tsx
import { MegaMenuNavbar } from "@/components/ui/mega-menu-navbar";
tsx
<MegaMenuNavbar
  logo={<span className="font-bold text-lg">Acme</span>}
  items={[
    { label: "Products", submenu: [
      { label: "Analytics", description: "Track your metrics", icon: <BarChart3 size={16} /> },
      { label: "API", description: "Build integrations", icon: <Code size={16} /> },
    ]},
    { label: "Pricing", href: "/pricing" },
  ]}
  ctaButton={<button className="px-4 py-2 bg-zinc-900 text-white text-sm rounded-lg">Sign up</button>}
/>

Dependencies

framer-motion

Exports

MegaMenuNavbar

File

components/ui/mega-menu-navbar.tsx
Preview

Hover over "Products" or "Resources" to see the mega menu

Made with