Patterns
Content Sidebar

Content Sidebar Layout

A 54px sticky header with tab-based navigation and an in-flow sidebar. Designed for document-style applications.

Metronic Demo: Layout 5

Usage

<MetronicLayout
  variant="content-sidebar"
  menu={menu}
  sidebarWidth={200}
  logo={<Logo />}
  currentPath={currentPath}
  onNavigate={setPath}
>
  <PageContent />
</MetronicLayout>

Structure

┌─────────────────────────────────────────────┐
│ Header (54px) — sticky, compact             │
├─────────────────────────────────────────────┤
│ Tab Navbar — horizontal tabs                │
├───────────┬─────────────────────────────────┤
│ Sidebar   │                                 │
│ (200px)   │   Content Area                  │
│ in-flow   │                                 │
│           │                                 │
└───────────┴─────────────────────────────────┘

Features

  • Compact 54px sticky header
  • Tab-style navbar with underline active indicator
  • Sidebar renders in-flow (not fixed) alongside content
  • Configurable sidebar width (default 200px)
  • Breadcrumb-style header with team/project dropdowns
Card SidebarTop Only