Patterns
Dark Sidebar

Dark Sidebar Layout

A 270px dark-themed sidebar with a zinc-950 background. Content area uses rounded corners for visual separation.

Metronic Demo: Layout 10

Usage

<MetronicLayout
  variant="dark-sidebar"
  menu={menu}
  logo={<Logo dark />}
  logoCollapsed={<LogoSmall dark />}
  sidebarTheme="dark"
  headerUser={{ name: 'Jane Doe' }}
  currentPath={currentPath}
  onNavigate={setPath}
>
  <PageContent />
</MetronicLayout>

Structure

┌──────────┬──────────────────────────────────┐
│ Dark     │ Header (on dark bg)              │
│ Sidebar  ├──────────────────────────────────┤
│ (270px)  │ ┌────────────────────────────┐   │
│          │ │                            │   │
│ zinc-950 │ │  Content (rounded-s-xl)    │   │
│ bg       │ │  white background          │   │
│          │ │                            │   │
│ Light    │ └────────────────────────────┘   │
│ text     │          dark outer bg           │
└──────────┴──────────────────────────────────┘

Features

  • 270px sidebar with zinc-950 (near-black) background
  • Light text and muted borders for dark theme readability
  • Content card with rounded-start-xl for visual separation
  • Header renders on dark background
  • Professional, premium aesthetic

Color Tokens

ElementColor
Sidebar background#09090b (zinc-950)
Sidebar text#fafafa (zinc-50)
Sidebar text muted#a1a1aa (zinc-400)
Sidebar border#27272a (zinc-800)
Active item background#18181b (zinc-900)
Mega MenuCharts