# Sidebar App

> A persistent left-rail navigation sidebar with a content area to its right — the canonical layout of modern productivity SaaS.

- Category: Layout-driven
- Era: 2013–present
- Origin: Slack, Linear, Notion — the SaaS productivity app layout pattern
- Lesson: https://design.dawit.dev/styles/sidebar-app
- Try it: https://design.dawit.dev/styles/sidebar-app?style=sidebar-app

## Where it came from

Slack (2013) helped make the left-sidebar nav, long familiar from desktop mail clients, the default layout for multi-section SaaS apps. Linear, Notion, GitHub, and dozens of others followed. It organises a complex app into a fixed-width navigation rail and a wide content area, giving persistent wayfinding without a top header nav. The sidebar collapses on mobile to a drawer or icon rail. This layout assumes daily returning users who benefit from fast cross-section navigation.

## How to spot it

- Fixed-width left navigation rail with workspace, section, and item hierarchy
- Wide content area to the right, taking most of the viewport
- Header incorporated into the content area or absent entirely
- Sidebar collapses on mobile to a drawer or a narrow icon-only strip

## Strengths

- Persistent navigation without occupying vertical space
- Scales to many sections and workspaces without a complex header menu
- Users learn where things live quickly after a few sessions

## Weaknesses

- Sidebar takes horizontal space that is expensive on small screens
- Two navigation systems can compete: sidebar and breadcrumb/header
- Adapting to public or marketing pages requires a separate layout context

## In the wild

- Slack workspace and channel view
- Linear project and team navigation
- Notion workspace sidebar

## Use it when

Multi-section productivity apps, admin tools, or dashboards where users navigate frequently between top-level destinations.

## Related styles
[Data Dense](https://design.dawit.dev/styles/data-dense.md), [Command Palette](https://design.dawit.dev/styles/command-palette.md), [Bento Grid](https://design.dawit.dev/styles/bento-grid.md)