PremiumNew

MegaMenu

Multi-column dropdown mega menu with Products, Resources, and Featured columns with cards and descriptions.

Navigation & Layoutmega-menudropdownnavigationheader

Dependencies

shadcn/ui components needed:

npx shadcn@latest add navigation-menunpx shadcn@latest add cardnpx shadcn@latest add separator

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { useState } from 'react';
4import { ChevronDown, Box, Zap, Globe, Book, FileText, Star } from 'lucide-react';
5import {
6  NavigationMenu,
7  NavigationMenuContent,
8  NavigationMenuItem,
9  NavigationMenuLink,
10  NavigationMenuList,
11  NavigationMenuTrigger,
12} from '@/components/ui/navigation-menu';
13import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
14import { Separator } from '@/components/ui/separator';
15import { Button } from '@/components/ui/button';
16
17export default function MegaMenu() {
18  const [isOpen, setIsOpen] = useState(false);
19
20  return (
21    <div className="w-full bg-white dark:bg-slate-950 border-b border-slate-200 dark:border-slate-800">
22      <div className="max-w-6xl mx-auto px-6 py-4">
23        <NavigationMenu onValueChange={(value) => setIsOpen(!!value)}>
24          <NavigationMenuList>
25            <NavigationMenuItem>
26              <NavigationMenuTrigger 
27                className="gap-2 font-medium text-slate-700 dark:text-slate-300 data-[state=open]:text-blue-600"
28                onClick={() => setIsOpen(!isOpen)}
29              >
30                Products
31                <ChevronDown className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
32              </NavigationMenuTrigger>
33              <NavigationMenuContent className="w-[600px] p-0">
34                <div className="grid grid-cols-3 gap-0">
35                  <div className="p-6 border-r border-slate-200 dark:border-slate-800">
36                    <h3 className="font-semibold text-slate-900 dark:text-white mb-4">Products</h3>
37                    <div className="space-y-3">
38                      {[
39                        { icon: Box, title: 'Components', desc: 'UI building blocks' },
40                        { icon: Zap, title: 'Templates', desc: 'Ready to use' },
41                        { icon: Globe, title: 'Themes', desc: 'Beautiful designs' },
42                      ].map((item, i) => (
43                        <NavigationMenuLink key={i} asChild>
44                          <a
45                            href="#"
46                            className="flex items-start gap-3 p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors group"
47                          >
48                            <div className="p-2 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 group-hover:bg-blue-600 group-hover:text-white transition-colors">
49                              <item.icon className="w-4 h-4" />
50                            </div>
51                            <div>
52                              <div className="font-medium text-slate-900 dark:text-white text-sm">{item.title}</div>
53                              <div className="text-xs text-slate-500 dark:text-slate-400">{item.desc}</div>
54                            </div>
55                          </a>
56                        </NavigationMenuLink>
57                      ))}
58                    </div>
59                  </div>
60                  <div className="p-6 border-r border-slate-200 dark:border-slate-800">
61                    <h3 className="font-semibold text-slate-900 dark:text-white mb-4">Resources</h3>
62                    <div className="space-y-2">
63                      {['Documentation', 'API Reference', 'Blog', 'Community'].map((item) => (
64                        <NavigationMenuLink key={item} asChild>
65                          <a
66                            href="#"
67                            className="block px-3 py-2 text-sm text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-md transition-colors"
68                          >
69                            {item}
70                          </a>
71                        </NavigationMenuLink>
72                      ))}
73                    </div>
74                  </div>
75                  <div className="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30">
76                    <Card className="border-0 shadow-none bg-transparent">
77                      <CardHeader className="p-0 pb-3">
78                        <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mb-3">
79                          <Star className="w-5 h-5 text-white" />
80                        </div>
81                        <CardTitle className="text-slate-900 dark:text-white">New Feature</CardTitle>
82                        <CardDescription className="text-slate-600 dark:text-slate-400">
83                          Check out our latest component library updates
84                        </CardDescription>
85                      </CardHeader>
86                      <CardContent className="p-0">
87                        <Button size="sm" className="w-full bg-blue-600 hover:bg-blue-700">
88                          Learn More
89                        </Button>
90                      </CardContent>
91                    </Card>
92                  </div>
93                </div>
94              </NavigationMenuContent>
95            </NavigationMenuItem>
96          </NavigationMenuList>
97        </NavigationMenu>
98      </div>
99    </div>
100  );
101}