Dashboard Sidebar Layout
Admin dashboards use a fixed sidebar + scrollable content area layout. Build a complete dashboard shell with a collapsible sidebar, header with breadcrumbs, and a content area with widget grid - the foundation for any admin panel.
Dashboard Layout Strategy
- Grid template - grid-template-columns: 250px 1fr for sidebar + content
- Fixed sidebar - height: 100vh with overflow-y: auto for scrollable sidebar
- Sidebar navigation - Vertical nav links with active state highlighting and icons
- Header bar - Sticky header inside the content area with breadcrumbs and user avatar
- Widget grid - Nested responsive grid inside the content area for dashboard cards
- Responsive - Sidebar collapses to icons-only on tablet, hidden with overlay on mobile
Dashboard Layout Code
/* Dashboard shell */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar content";
min-height: 100vh;
}
/* Sidebar */
.sidebar {
grid-area: sidebar;
background: #1a1a2e;
padding: 20px 0;
overflow-y: auto;
}
.sidebar-logo {
padding: 0 20px;
font-size: 1.3rem;
font-weight: 800;
color: #E44D26;
margin-bottom: 32px;
}
.sidebar-nav { list-style: none; padding: 0; }
.sidebar-nav a {
display: flex; align-items: center; gap: 12px;
padding: 12px 20px;
color: #a0a0b0;
text-decoration: none;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
color: white;
background: rgba(255,255,255,0.05);
border-left-color: #667eea;
}
/* Header */
.dash-header {
grid-area: header;
background: white;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
}
/* Content */
.dash-content {
grid-area: content;
padding: 24px;
background: #f0f4f8;
overflow-y: auto;
}
/* Responsive */
@media (max-width: 768px) {
.dashboard { grid-template-columns: 1fr; grid-template-areas: "header" "content"; }
.sidebar { display: none; }
}Tip
Use grid-template-areas for dashboard layouts. Naming areas ('sidebar header', 'sidebar content') makes the code self-documenting - anyone reading it immediately understands the layout structure without visualizing column/row numbers.
Grid handles two-dimensional layouts - rows AND columns simultaneously
Common Mistake
Not giving the sidebar overflow-y: auto for independent scrolling. Without it, the sidebar forces the entire page to scroll, breaking the fixed-sidebar pattern. Each grid cell should manage its own overflow.
Practice Task
Enhance the dashboard: (1) Add active nav link state with border-left: 3px solid accent, (2) Add a sticky header inside the content area, (3) Nest a widget grid using repeat(auto-fit, minmax(250px, 1fr)) inside the content area.
Quick Quiz
Key Takeaways
- Admin dashboards use a fixed sidebar + scrollable content area layout.
- Grid template - grid-template-columns: 250px 1fr for sidebar + content
- Fixed sidebar - height: 100vh with overflow-y: auto for scrollable sidebar
- Sidebar navigation - Vertical nav links with active state highlighting and icons