Sidebar Layout

The default layout variant. A 280px fixed sidebar with a 70px header and scrollable content area.

Metronic Demo: Layout 1

Usage

<MetronicLayout
  variant="sidebar"
  menu={menu}
  sidebarCollapsed={collapsed}
  onSidebarToggle={() => setCollapsed(!collapsed)}
  sidebarWidth={280}
  logo={<Logo />}
  logoCollapsed={<LogoSmall />}
  headerUser={{ name: 'Jane Doe' }}
  headerNavItems={headerNav}
  notificationCount={3}
  currentPath={currentPath}
  onNavigate={setPath}
>
  <PageContent />
</MetronicLayout>

Structure

┌─────────────────────────────────────────────┐
│ Sidebar (280px) │ Header (70px)             │
│                 ├───────────────────────────│
│  Logo           │                           │
│  Menu items     │   Content Area            │
│  - Groups       │                           │
│  - Collapsible  │                           │
│  - Active state │                           │
│                 │   Footer                  │
└─────────────────┴───────────────────────────┘

Features

Collapsible sidebar with toggle button
Sidebar section groups with headings and separators
Nested menu items with expand/collapse
Active path highlighting
Header with navigation links, user avatar, search, and notification bell
Responsive: sidebar becomes a drawer on mobile

Props

Prop	Default	Description
`sidebarWidth`	`280`	Sidebar width in pixels
`sidebarCollapsed`	`false`	Whether sidebar is collapsed
`sidebarTheme`	`'light'`	Sidebar color theme

Overview Horizontal