The universal web app layout. Fixed left nav, scrolling content area. Every dashboard you've ever used.
A persistent navigation panel on the left side of the screen, with the main working area on the right. This is the universal layout for web applications, dashboards, and admin interfaces. The sidebar stays fixed as the main content area scrolls.
The outer container uses display: flex or CSS Grid with two columns: a fixed-width sidebar (240–280px) and a flex-1 content area. The sidebar gets position: sticky; top: 0 with height: 100vh. The sidebar contains the logo at top, navigation links in the middle (with icons), and user profile at the bottom. The content area has its own internal scrolling.
Sidebar stays fixed. Scroll the right content area.
Build a SaaS dashboard layout with a sidebar + content structure. Sidebar: 240px wide, dark background (#111827), fixed to left side, height:100vh. Contains: logo at top, navigation links with icons (Dashboard, Analytics, Projects, Settings, Team) with active state highlighted in blue, and user avatar + name at bottom. Main content area: flex-1, light gray background (#F9FAFB), has a top header bar with page title and action buttons. Content below shows: 4 stat cards in a row (Users, Revenue, Orders, Growth), then a data table. On mobile, sidebar collapses behind a hamburger menu.