Patterns
Mega Menu

Mega Menu Layout

Header with a mega-menu style navbar. Designed for applications with deep navigation hierarchies.

Metronic Demo: Layout 9

Usage

<MetronicLayout
  variant="mega-menu"
  menu={menu}
  logo={<Logo />}
  headerUser={{ name: 'Jane Doe' }}
  currentPath={currentPath}
  onNavigate={setPath}
>
  <PageContent />
</MetronicLayout>

Structure

┌─────────────────────────────────────────────┐
│ Header (70px)                               │
├─────────────────────────────────────────────┤
│ Mega Menu Navbar — muted background         │
├─────────────────────────────────────────────┤
│                                             │
│   Content Area                              │
│                                             │
│   Footer                                    │
└─────────────────────────────────────────────┘

Features

  • Standard 70px header
  • Mega-menu navbar with muted background (slate-50)
  • Navbar items derived from top-level menu configuration
  • Suitable for applications with many top-level sections
  • Content area has muted background for visual depth