Sidebar Layout
A page layout with a persistent vertical navigation panel beside the main content area.
Plain English
The sidebar layout is the defining pattern of web applications — a fixed or sticky vertical panel on the left holding navigation, filters, or secondary content, with the main content taking up the remaining space. Done well, it keeps navigation always accessible without competing with main content. The main pitfall: sidebars that are too wide steal too much space from the content, and sidebars that collapse poorly on mobile lose their value.
Technical
Common implementations: display: grid with grid-template-columns: 240px 1fr or display: flex on the parent. The sidebar typically has position: sticky + height: 100vh or position: fixed for persistent nav. Mobile handling: hide sidebar by default (display: none or transform: translateX(-100%)), show with a hamburger toggle. CSS Grid is the cleanest approach: aside { grid-column: 1 } main { grid-column: 2 }. Standard widths: 240px (standard), 280px (comfortable), 64px (icon-only collapsed).
Live Demo
Sidebar Layout Variants
Icon-only — 64px wide
Labeled nav — 200px wide
Sidebars: 200–280px for labeled nav. 60–72px for icon-only nav.
Usage
✓ Good usage
A 240px left sidebar with sticky positioning, overflow-y: auto for its own scrolling, and a CSS Grid parent — the sidebar stays visible while the main content scrolls independently.
✗ Bad usage
A 400px sidebar on a 1200px page — one-third of the screen is navigation, leaving only 800px for the actual content.
Recommended values
- Standard: 240px fixed width
- Comfortable: 260–280px
- Icon-only collapsed: 64px
- Right sidebar (detail panel): 320–400px
- Mobile: full-width drawer overlay or bottom navigation
- Sticky inside viewport: position: sticky + top: 0 + height: 100vh + overflow-y: auto
Common mistakes
- Sidebar wider than 300px on standard 1200px content — overwhelms the content area.
- No mobile handling — sidebar forces horizontal scroll on phones.
- Sidebar that scrolls with the page instead of being sticky.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use CSS Grid: grid-template-columns: 240px 1fr for the app layout. Sidebar: position sticky, top 0, height 100vh, overflow-y auto. On mobile (< 768px): hide sidebar, replace with a hamburger menu that opens a full-height overlay drawer.