Patterns
Mini Sidebar

Mini Sidebar Layout

Compact 58px icon-only sidebar with a fixed navbar. Maximizes content space while keeping navigation accessible.

Metronic Demo: Layout 3

Usage

<MetronicLayout
  variant="mini-sidebar"
  menu={menu}
  logo={<Logo />}
  logoCollapsed={<LogoIcon />}
  currentPath={currentPath}
  onNavigate={setPath}
>
  <PageContent />
</MetronicLayout>

Structure

┌────┬────────────────────────────────────────┐
│    │ Header (58px)                          │
│ 58 ├────────────────────────────────────────┤
│ px │ Navbar (56px) — rounded top            │
│    ├────────────────────────────────────────┤
│Icon│                                        │
│Only│   Content Area (card style)            │
│    │                                        │
│    │   Footer                               │
└────┴────────────────────────────────────────┘

Features

  • 58px icon-only sidebar with circular icon buttons
  • Fixed navbar adjacent to mini sidebar with rounded-top-xl corners
  • Card-style content area with rounded-bottom-xl
  • Hover states on sidebar icons show labels
  • Compact header at 58px height
HorizontalCard Sidebar