"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Menu, X, ChevronDown, ArrowRight, LayoutTemplate, Terminal, Database, ShieldCheck, BookOpen, LifeBuoy, Hexagon } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // ============================================================================ // 1. DATA STRUCTURE FOR MEGA MENU // ============================================================================ const PRODUCTS_MENU = [ { icon: LayoutTemplate, title: "Frontend Components", desc: "Pre-built, accessible UI elements." }, { icon: Terminal, title: "CLI Tool", desc: "Generate code directly from terminal." }, { icon: Database, title: "Infrastructure", desc: "Scalable backend deployment." }, { icon: ShieldCheck, title: "Security & Auth", desc: "Enterprise-grade authentication." }, ]; const RESOURCES_MENU = [ { icon: BookOpen, title: "Documentation", desc: "Quickstarts, tutorials, and API reference." }, { icon: LifeBuoy, title: "Help Center", desc: "Support articles and troubleshooting." }, ]; export function EnterpriseMegaMenuNavbar() { // State for desktop mega menus ("products", "resources", or null) const [activeMenu, setActiveMenu] = useState(null); // State for mobile full-screen menu const [isMobileOpen, setIsMobileOpen] = useState(false); const navRef = useRef(null); // Close desktop menus when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (navRef.current && !navRef.current.contains(event.target as Node)) { setActiveMenu(null); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); // Lock body scroll when mobile menu is open useEffect(() => { if (isMobileOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "unset"; } return () => { document.body.style.overflow = "unset"; }; }, [isMobileOpen]); return (

{/* --- LEFT: Brand --- */}

NexusCorp

{/* --- CENTER: Desktop Navigation (Hidden < @3xl) --- */}

{/* Products Dropdown Trigger */} {/* Resources Dropdown Trigger */} Pricing

{/* --- RIGHT: Actions & Mobile Toggle --- */}

{/* ===================================================================== DESKTOP MEGA MENUS (Absolute positioned below header) ===================================================================== */} {activeMenu === "products" && (

{/* Left Column: Grid of Products */}

{PRODUCTS_MENU.map((item, idx) => (

{item.title}

{item.desc}

))}

{/* Right Column: Featured Promo */}

New Release

Enterprise AI Agents

Integrate automated intelligence directly into your workflows with zero configuration.

)} {activeMenu === "resources" && (

{RESOURCES_MENU.map((item, idx) => (

{item.title}

{item.desc}

))}

)} {/* ===================================================================== MOBILE FULLSCREEN MENU (Visible < @3xl) ===================================================================== */} {isMobileOpen && (

{/* Mobile Products Section */}

Products

{PRODUCTS_MENU.map((item, idx) => (

{item.title} ))}

{/* Mobile Resources Section */}

Resources

{RESOURCES_MENU.map((item, idx) => (

{item.title} ))}

{/* Mobile Footer Actions */}

)}

); } // ============================================================================ // 2. DEMO / VISUALIZER WRAPPER // ============================================================================ export default function EnterpriseMegaMenuNavbarDemo() { return (

{/* The component handles its own positioning internally */} {/* Mock Content */}

Enterprise B2B Pattern

The gold standard of
Corporate Navigation.

Click on "Products" or "Resources" in the top bar to experience a true Mega-Menu panel with grid layouts and featured content. Resize to mobile to see a fully functional, scrollable full-screen overlay.

); }

The gold standard of Corporate Navigation.

The gold standard of
Corporate Navigation.