Sidebar App Shell
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
Live Demo
Actually clickableWhat you just saw:Notion or Linear desktop views: a dark gray hierarchy tree and workspace menu on the left that remains rock-solid while you scroll through long project boards and documents on the right.
What it actually is
The Sidebar App Shell is the cornerstone of SaaS, productivity software, and administrative dashboards. Unlike marketing websites, it locks the viewport to full screen height (h-screen overflow-hidden), pinning global navigation to the left while granting the main workspace its own dedicated vertical scroll track.
Anatomy · What it's made of
Fixed Sidebar固定侧边栏
Houses workspace switchers, hierarchy trees, and global navigation
Collapsible Rail紧凑折叠导轨
Slim icon-only rail preserving screen estate when collapsed
App Header / Breadcrumb顶栏面包屑区
Path indicators, search trigger, and contextual utilities
Independent Canvas独立主画布
Dedicated scroll container (overflow-y-auto) for work surfaces
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| SaaS dashboards, enterprise applications, and multi-tenant admin consoles | Yes |
| Complex platforms demanding persistent navigation context and fast switching | Yes |
| Developer documentation portals and structured knowledge bases | Yes |
| Single-page promotional landing pages or lightweight marketing sites | No |
| Immersive long-form reading where side rails create visual noise | No |
Allowing sidebar and main content to scroll together, forcing users to scroll back up to navigate.
Cramming desktop sidebars onto mobile without converting them into slide-over sheets.
Similar Patterns
Don't mix these upSidebar App ShellCurrent
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
Split Screen
双栏分屏
Divides the screen into equal halves, balancing emotional storytelling with functional utility.
In one line:Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
Split Screen
双栏分屏
Divides the screen into equal halves, balancing emotional storytelling with functional utility.
Container
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Sticky Bar
粘性悬浮栏
Floats along with document flow until reaching viewport boundaries where it pins persistently.
How to tell AI
Three levels of promptAdd the component name and specifics
Build a SaaS App Shell: locked full viewport height, 260px fixed sidebar on the left, top header with breadcrumb navigation on the right, and an independent scrollable canvas container.
Don't just say this to AI
Bad → BetterDon't say this to AI
Put a menu on the left side of the page.
Say this instead
Create a SaaS application shell: h-screen flex overflow-hidden, left fixed 260px navigation rail, right flex-1 with breadcrumb header and overflow-y-auto canvas, collapsing into a mobile drawer.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.