Horizontal Layout

Full-width layout with no sidebar. Navigation is provided via a horizontal navbar below the header.

Metronic Demo: Layout 2

Usage

<MetronicLayout
  variant="horizontal"
  menu={menu}
  logo={<Logo />}
  headerUser={{ name: 'Jane Doe' }}
  navbarLinks={[
    { label: 'Videos', href: '/videos' },
    { label: 'User Guides', href: '/guides' },
    { label: 'Support', href: '/support' },
  ]}
  currentPath={currentPath}
  onNavigate={setPath}
>
  <PageContent />
</MetronicLayout>

Structure

┌─────────────────────────────────────────────┐
│ Header (70px) — full width                  │
├─────────────────────────────────────────────┤
│ Navbar (56px) — horizontal links            │
├─────────────────────────────────────────────┤
│                                             │
│   Content Area (full width)                 │
│                                             │
│   Footer                                    │
└─────────────────────────────────────────────┘

Features

No sidebar — content takes full viewport width
Horizontal navbar with active indicator (bottom border)
Best for wide dashboards and data-heavy views
navbarLinks prop for navbar items

Sidebar Mini Sidebar