Fixed sidebar navigation keeps every key action permanently accessible while the main content area scrolls freely. Built for dashboards, admin panels, doc sites, and SaaS apps.
w-64 fixedml-64w-16 iconsml-16off-canvasfull-widthClick nav items to switch active state. Toggle desktop/mobile view. Open and close the sidebar to see collapse behavior.
Five vertical zones from top to bottom, each with a clear responsibility. The navigation zone is the only scrollable area.
w-64 = 256px(or w-72 = 288px for wider variant)Fixed height header with product logo and optional workspace switcher. Sets the brand context immediately.
height: 64–80px, border-bottom, flex items-centerQuick-access search input. Visible only when sidebar is expanded. Hides in collapsed icon-only mode.
height: 52–60px, focus:ring-2 focus:ring-blue-400/30The primary scrollable zone. Groups related items with section labels. Current item has solid left accent line.
flex-1, overflow-y-auto, space-y-1 per groupLower-priority links: Help, Feedback, Settings. Separated visually to avoid navigation confusion.
border-top, space-y-1, muted colorsAvatar, name, and role. May include account menu or logout action. Always anchored to the very bottom.
border-top, height: 64–72px, flex items-center gap-3The four core building blocks of a fixed sidebar layout, each demonstrated with interactive states.
Active item: bg-blue-50 text-blue-700 with absolute left-0 w-0.5 bg-blue-600 accent line. Stable, not floating.
Collapsed to w-16 = 64px. Labels hidden, icons centered. Active line persists.
Four named interaction rules that govern all sidebar layout behavior. Hover or click each demo card to feel the constraint in action.
duration-150 — no overshot spring
High-interaction areas like nav items use duration-150 for instant response. Fancy spring effects break workflow rhythm.
Hover both rows — feel the efficiency difference. Nav items must never feel sluggish.
translate-x-0.5 on hover
On hover, icons shift 2px right. The micro-movement guides the eye toward the main content area — directional affordance without noise.
left accent line — stable anchor
Current item has a solid 2px left border as a permanent anchor. No floating ring, no glow — the user always knows exactly where they are.
Click to change active item — the left line anchors instantly.
-translate-y-0.5 + lightweight shadow
Main area cards lift by only 2px on hover with a subtle shadow spread. Reading stays stable — no dramatic jumps that interrupt scanning.
Hover both cards side by side — the left card is barely perceptible, the right is jarring. Use the left approach.
The non-negotiable constraints that define the Fixed Sidebar layout. Every rule exists to protect usability and developer confidence.
w-64 (256px)ml-64duration-150translate-x-0.5w-0.5 left-0-translate-y-0.5rgba(15,23,42,0.08)z-40