Overview
The MegaMenu is a staple for complex SaaS, e-commerce, and enterprise sites. Unlike standard dropdowns, mega menus can accommodate extensive hierarchies, featured articles, marketing banners, and icons. This component uses framer-motion for buttery smooth dropdown animations and delays the onMouseLeave event slightly to prevent accidental closures when users move their mouse across gaps.
Installation
npm install framer-motion lucide-react
Usage
import { MegaMenu } from "@/components/creative/mega-menu"
export default function Navigation() {
const menuItems = [
{
id: "products",
label: "Products",
children: [
{ label: "Design System", href: "/design" },
{ label: "API Services", href: "/api" },
],
featured: {
title: "New AI Features",
description: "Explore our latest generative AI tools.",
image: "/banner.jpg",
href: "/ai"
}
},
{
id: "pricing",
label: "Pricing",
href: "/pricing"
}
]
return <MegaMenu items={menuItems} />
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { MegaMenu } from "@/components/creative/mega-menu";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { MegaMenu } from "@/components/creative/mega-menu";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<MegaMenu
items{/* value */}
animationDirection{/* value */}
>
<div>Content goes here</div>
</MegaMenu>
</div>
);
}