UI Sidebars Catalog

Fifteen named sidebar patterns across app shell nav, filter drawers, settings rails, icon rails, dual rails, off-canvas, trees, inboxes, and docs TOC. See CATALOG.md for AI prompt recipes.

.sidebar-app-shell

App Shell Nav

Classic left app nav with brand, icon links, and main content.

Dashboard

Primary app content sits beside a persistent shell nav.

.sidebar-app-nested

App Nested Nav

Dark shell with details groups for nested destinations.

Overview

Nested groups keep dense IA scannable without leaving the rail.

.sidebar-app-user

App User Shell

Search in the rail plus a pinned user footer.

Ledger
Mira Chen mira@ledger.example

Customers

Account chrome stays available while browsing records.

.sidebar-filter-overlay

Filter Overlay Drawer

Right drawer + scrim overlays the catalog; Esc / Close dismisses.

Catalog

Product grid placeholder. Open Filters to slide in the drawer over this content.

.sidebar-filter-push

Filter Push Drawer

Filter rail expands and pushes main content aside.

Results

24 products match. Toggle filters to push this pane narrower.

.sidebar-settings-rail

Settings Rail

Right-hand settings rail for page/document preferences.

Editor canvas

Primary surface for the document; settings stay docked on the right.

.sidebar-settings-nav

Settings Nav Rail

Settings IA: category rail left, form panel right.

Profile

Update how you appear across Harbor workspaces.

.sidebar-icon-collapse

Collapsible Icon Rail

Expanded labels by default; toggle collapses to icons only.

Projects

Collapse the rail to reclaim horizontal space on dense boards.

.sidebar-icon-mini

Mini Icon Rail

Always-compact icon-only rail with tooltips via title/aria-label.

Inbox

Permanent mini rail for tools that rarely need labels on screen.

.sidebar-icon-flyout

Icon Flyout Rail

Mini rail that opens labeled flyout menus beside the active icon.

Overview

Click an icon to open its flyout; click outside to dismiss.

.sidebar-dual

Dual Rail

Primary icon rail plus a secondary channel/list rail beside main content.

#general

Dual rails keep workspace switching separate from channel browsing.

.sidebar-offcanvas

Off-canvas Menu

Hamburger opens a left drawer over a scrim; Close / Esc dismisses.

Harbor

Main page content. Open Menu to slide in the off-canvas nav from the left.

.sidebar-tree

Tree Browser

Folder tree with nested details/summary and selectable files.

Button.tsx

Tree rails are common in IDEs, file pickers, and docs browsers.

.sidebar-inbox

Inbox List Rail

Conversation list as the sidebar; selecting a thread updates the pane.

Inbox

Mira Chen

Can we ship the dual-rail pattern this week?

.sidebar-docs-toc

Docs TOC Rail

Right-hand table of contents beside long-form documentation.

Layout systems

Use a shared page container, section rhythm, and one primary sidebar pattern per surface.

Page container

Keep content width consistent so rails do not fight the reading column.

Section rhythm

Stack sections with a single spacing scale rather than ad-hoc margins.