Mega Menu
A dropdown that glides between menus instead of closing.
Features
- A dropdown that stays open as you move between menus
- The panel resizes to each menu and the content slides across
- Rows with icons plus a featured blue card
- Mobile menu included
Best for: SaaS, agencies and stores with several products or services under each menu.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | Links. Items with children open the dropdown; the item icon tints each row. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Mega Menu navbar free to use?
Yes. Mega Menu is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Mega Menu work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Mega Menu in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Mega Menu need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Mega Menu accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.