import React, { useState } from 'react'; import { ChevronDown, Box, Layers, Zap, BarChart, Rocket, Shield, Video, BookOpen, ChevronRight } from 'lucide-react'; type NavItem = { label: string; href: string; type: 'link' | 'dropdown' | 'mega'; children?: { title: string; description: string; href: string; icon?: React.ElementType; }[]; }; const navItems: NavItem[] = [ { label: "Products", href: "#", type: 'mega', children: [ { title: "Analytics Platform", description: "Get deep insights into your user behavior.", href: "#", icon: BarChart }, { title: "Automation Rules", description: "Automate your workflows with powerful triggers.", href: "#", icon: Zap }, { title: "Content Management", description: "Manage your digital assets in one place.", href: "#", icon: Layers }, { title: "Security Shield", description: "Enterprise-grade protection for your data.", href: "#", icon: Shield }, ] }, { label: "Solutions", href: "#", type: 'dropdown', children: [ { title: "For Startups", description: "", href: "#" }, { title: "For Enterprise", description: "", href: "#" }, { title: "For Agencies", description: "", href: "#" }, ] }, { label: "Developers", href: "#", type: 'link' }, { label: "Pricing", href: "#", type: 'link' }, ]; export function NavigationMegaMenu() { const [activeMenu, setActiveMenu] = useState(null); return (

{/* Placeholder Logo for Context */}

Logo

{navItems.map((item) => (

setActiveMenu(item.label)} onMouseLeave={() => setActiveMenu(null)} > {item.label} {(item.type === 'dropdown' || item.type === 'mega') && ( {/* Dropdown Menu */} {(activeMenu === item.label && (item.type === 'dropdown' || item.type === 'mega')) && (

{/* Mega Menu Layout */} {item.type === 'mega' ? (

{item.children?.slice(0, 4).map((child) => ( {child.icon && (

)}

{child.title}

{child.description}

))}

New Release v2.0

Discover the power of our latest engine improvement.

Read details

) : ( // Simple Dropdown

{item.children?.map((child) => ( {child.title} ))}

)}

))}

{/* Placeholder Actions */}

); }

Navigation Mega Menu

Encyclopedia