Patterns
Top Only

Top Only Layout

Header-only layout with no sidebar or navbar. Maximum content space for simple applications.

Metronic Demo: Layout 7

Usage

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

Structure

┌─────────────────────────────────────────────┐
│ Header (100px) — tall, prominent            │
├─────────────────────────────────────────────┤
│                                             │
│   Content Area (full width, full height)    │
│                                             │
│                                             │
│   Footer                                    │
└─────────────────────────────────────────────┘

Features

  • Tall 100px header with prominent logo and mega-menu capability
  • No sidebar or navbar — content takes full viewport
  • Best for simple apps, landing pages, or single-purpose views
  • Header includes toolbar icons, user avatar, and notification badge