Layout Patterns Overview

The MetronicLayout component provides 8 layout variants covering all 10 Metronic demo layouts. Each variant defines the structural arrangement of sidebar, header, navbar, and content areas.

All Variants

Variant	Metronic Demo	Structure
`sidebar`	Layout 1	280px sidebar + 70px header
`horizontal`	Layout 2	Full-width header + horizontal navbar
`mini-sidebar`	Layout 3	58px icon sidebar + fixed navbar
`card-sidebar`	Layouts 4/6/8	Sidebar + muted bg + card content
`content-sidebar`	Layout 5	54px sticky header + tabs + sidebar
`top-only`	Layout 7	100px header only
`mega-menu`	Layout 9	Header + mega-menu navbar
`dark-sidebar`	Layout 10	270px dark sidebar

Common Props

All variants share these props:

interface MetronicLayoutProps {
  variant?: MetronicLayoutVariant;     // Layout variant
  menu: MetronicMenuConfig;            // Sidebar/navbar menu items
  children: React.ReactNode;           // Page content
 
  // Sidebar
  sidebarCollapsed?: boolean;          // Collapsed state
  onSidebarToggle?: () => void;        // Toggle handler
  sidebarWidth?: number;               // Width in px
  sidebarTheme?: 'light' | 'dark';     // Sidebar color theme
 
  // Header
  logo?: React.ReactNode;             // Logo element
  logoCollapsed?: React.ReactNode;    // Logo when sidebar collapsed
  headerUser?: { name: string };      // User display
  headerNavItems?: HeaderNavItem[];   // Header navigation
  headerContent?: React.ReactNode;   // Custom header content
  notificationCount?: number;         // Badge count
 
  // Navigation
  currentPath?: string;               // Active path for highlighting
  onNavigate?: (path: string) => void; // Path change handler
  navbarLinks?: NavbarLink[];         // Horizontal navbar links
 
  // Footer
  footerContent?: React.ReactNode;    // Footer element
}

Menu Configuration

const menu: MetronicMenuConfig = [
  {
    heading: 'Main',
    items: [
      { title: 'Dashboard', path: '/', icon: 'LayoutGrid' },
      {
        title: 'Settings',
        icon: 'Settings',
        children: [
          { title: 'General', path: '/settings/general' },
          { title: 'Security', path: '/settings/security' },
        ],
      },
    ],
  },
  { separator: true },
  {
    heading: 'Apps',
    items: [
      { title: 'CRM', path: '/crm', icon: 'Users' },
    ],
  },
];

Choosing a Variant

General admin apps: sidebar (most common)
Data-heavy dashboards: horizontal or top-only
Many navigation sections: mini-sidebar or mega-menu
Document/content apps: content-sidebar
Professional/dark brand: dark-sidebar
Visual separation: card-sidebar

Wizard Sidebar