Sidebar Navigation
Vertical navigation menu positioned on the side of a page, typically on the left, containing links and menu items
What is it?
A sidebar navigation is a vertical menu bar, usually positioned on the left side of a page or application. It contains links, menu items, or categories that help users navigate through different sections or pages. Sidebar navigation is common in web applications, admin dashboards, and SaaS products because it keeps navigation persistent and accessible at all times.
Sidebars can be static (always visible), collapsible (toggle between expanded/compact), or responsive (hidden on mobile and revealed via a hamburger menu).
Mockdown
``` ┌─────────────┬──────────────────────────────┐ │ Logo │ │ ├─────────────┤ Main Content │ │ › Dashboard │ │ │ › Analytics │ │ │ › Reports │ │ │ › Settings │ │ │ › Help │ │ │ │ │ │ │ │ │ ─ ─ ─ ─ ─ ─ │ │ │ › Sign Out │ │ ├─────────────┴──────────────────────────────┤ ``` Typical sidebar structure: - **Logo or branding** at the top - **Primary navigation items** with optional icons - **Sub-menu items** (nested/indented for hierarchy) - **Separators or sections** to group related items - **User account or settings** at the bottom - **Hover/active states** to show current page or hovered item
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ ← Settings 👤 User │
├───────────────────────────────────────────────┤
│ │
│ ┌─ Profile ─────────────────────────────┐ │
│ │ Avatar: [ 👤 ] [ Upload ] │ │
│ │ Name: [___________________] │ │
│ │ Email: [___________________] │ │
│ │ Bio: [___________________] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌─ Preferences ─────────────────────────┐ │
│ │ Theme: ○ Light ● Dark │ │
│ │ Language: [ English ▾ ] │ │
│ │ Timezone: [ UTC-5 ▾ ] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌─ Notifications ──────────────────────┐ │
│ │ Email alerts: [■] On │ │
│ │ Push: [□] Off │ │
│ └──────────────────────────────────────┘ │
│ [ Save Changes ] │
└───────────────────────────────────────────────┘Settings
Account Settings Panel
A tabbed account settings page with sections for profile, password, notifications, billing, and danger zone — clean and accessible for SaaS apps.
--settings--profile--account
Medium
┌──────────┬────────────────────────────────────┐
│ ☰ Menu │ ◉ Dashboard 🔔 👤 │
│ ├────────────────────────────────────┤
│ ● Home │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ ○ Stats │ │ ▲ 1,234│ │ ● 87% │ │ $9.4K │ │
│ ○ Users │ │ KPI ···│ │ KPI ···│ │ KPI ···│ │
│ ○ Config │ └────────┘ └────────┘ └────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 📈 Chart │ │
│ │ │ ╱╲ ╱╲ ╱╲ │ │
│ │ │ ╱ ╲╱╱ ╲╱ ╲╱─── │ │
│ │ └──────────────────────────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ Name Role Status │ │
│ │ │ ───── ───── ──────── │ │
│ │ │ Alice Admin ● Active │ │
│ │ │ Bob User ○ Idle │ │
│ │ └──────────────────────────────┘ │
└──────────┴────────────────────────────────────┘Dashboard
SaaS Analytics Dashboard
A full-featured analytics dashboard with KPI cards, revenue charts, user activity tables, and a collapsible sidebar nav — ideal for SaaS admin panels.
--analytics--kpi--charts
Complex
┌──────────┬────────────────────────────────────┐
│ ◉ App │ Search [____________] 🔔 👤 │
│ ├────────────────────────────────────┤
│ ● Home │ │
│ ○ Inbox │ ┌───────────────────────────────┐│
│ ○ Tasks │ │ ⌘K Quick Actions ││
│ ○ Docs │ │ ───────────────────────── ││
│ ○ Team │ │ 📄 New Document ││
│ ○ API │ │ 👥 Invite Team Member ││
│ │ │ ⚙ Open Settings ││
│ ──────── │ │ 📊 View Analytics ││
│ Settings │ │ ... ││
│ Help │ └───────────────────────────────┘│
│ │ │
│ │ ┌──────────┐ ┌──────────────────┐│
│ │ │ Projects │ │ Recent Activity ││
│ │ │ ──────── │ │ ─────────────── ││
│ │ │ ▸ Alpha │ │ ● Deploy v2.1 ││
│ │ │ ▸ Beta │ │ ○ PR merged ││
│ │ │ ▸ Gamma │ │ ○ Issue #42 ││
│ │ └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘SaaS
SaaS App Shell with Command Palette
A complete SaaS application shell featuring a collapsible sidebar, command palette (⌘K), notification drawer, and multi-workspace switcher — the skeleton for any SaaS product.
--app-shell--sidebar--command-palette
Complex
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.