NotionSidebar [example] v1.0.0

Notion's sidebar is a 240px-wide rail in cream #F7F6F3 showing a tree of nested pages. Each page row is 28px tall with a 14px chevron (collapsed/expanded), 18px emoji/icon, and 14px text in #37352F. Indentation is exactly 18px per nesting level. Hover reveals an 'Add subpage' (+) icon and a '...' menu on the right.

Label

Notion — Nested Pages Sidebar

Url

https://notion.so

Observed

2026-Q1

Brand

notion

Pattern Applied

@community/pattern-sidebar-collapsible

Aesthetic Notes

• Sidebar background: #F7F6F3 (warm cream, NOT pure gray); main content #FFFFFF — the contrast is intentional.
• Row height: 28px (denser than typical 36px sidebars to support deep nesting).
• Indentation: 18px per level (~equal to icon width), with no visible guide lines.
• Chevron: 14px, color #9B9A97, rotates 90° on expand with 100ms ease-out.
• Hover state: rgba(55,53,47,0.05) row, '+' and '...' icons fade in at right.
• Active page: rgba(55,53,47,0.08) row + bold 14px/600 weight on title.

What To Copy

• Use a warm off-white (#F7F6F3) for sidebar instead of #FFFFFF or gray — it disambiguates from main content while staying calm.
• 18px indentation per level is the sweet spot — 16px feels cramped, 24px wastes horizontal space at deep nesting.
• Reveal action icons on hover only — always-visible '...' menus add visual noise to long lists.
• Active state via background tint + font-weight bump (not color change) reads as 'selected' without being loud.

What To Skip

• Deep nesting (>5 levels) becomes unreadable; consider breadcrumb badges at level 4+.
• The drag-to-reorder is finicky on touch devices — provide a long-press alternative.

Screenshot Hint

scout query: notion sidebar nested pages cream background emoji icons chevrons

Demonstrates

• Off-white sidebar backgrounds (cream, not gray) feel warmer than typical productivity tools.
• Density is power-user-friendly when nesting goes deep (28px rows over 36px).
• Hover-revealed actions reduce visual noise at rest while preserving discoverability.

NotionSidebar [example] v1.0.0

Notion's sidebar is a 240px-wide rail in cream #F7F6F3 showing a tree of nested pages. Each page row is 28px tall with a 14px chevron (collapsed/expanded), 18px emoji/icon, and 14px text in #37352F. Indentation is exactly 18px per nesting level. Hover reveals an 'Add subpage' (+) icon and a '...' menu on the right.

Label

Notion — Nested Pages Sidebar

Url

https://notion.so

Observed

2026-Q1

Brand

notion

Pattern Applied

@community/pattern-sidebar-collapsible

Aesthetic Notes

• Sidebar background: #F7F6F3 (warm cream, NOT pure gray); main content #FFFFFF — the contrast is intentional.
• Row height: 28px (denser than typical 36px sidebars to support deep nesting).
• Indentation: 18px per level (~equal to icon width), with no visible guide lines.
• Chevron: 14px, color #9B9A97, rotates 90° on expand with 100ms ease-out.
• Hover state: rgba(55,53,47,0.05) row, '+' and '...' icons fade in at right.
• Active page: rgba(55,53,47,0.08) row + bold 14px/600 weight on title.

What To Copy

• Use a warm off-white (#F7F6F3) for sidebar instead of #FFFFFF or gray — it disambiguates from main content while staying calm.
• 18px indentation per level is the sweet spot — 16px feels cramped, 24px wastes horizontal space at deep nesting.
• Reveal action icons on hover only — always-visible '...' menus add visual noise to long lists.
• Active state via background tint + font-weight bump (not color change) reads as 'selected' without being loud.

What To Skip

• Deep nesting (>5 levels) becomes unreadable; consider breadcrumb badges at level 4+.
• The drag-to-reorder is finicky on touch devices — provide a long-press alternative.

Screenshot Hint

scout query: notion sidebar nested pages cream background emoji icons chevrons

Demonstrates

• Off-white sidebar backgrounds (cream, not gray) feel warmer than typical productivity tools.
• Density is power-user-friendly when nesting goes deep (28px rows over 36px).
• Hover-revealed actions reduce visual noise at rest while preserving discoverability.

Label

Notion — Nested Pages Sidebar

Url

https://notion.so

Observed

2026-Q1

Brand

notion

Pattern Applied

@community/pattern-sidebar-collapsible

Aesthetic Notes

• Sidebar background: #F7F6F3 (warm cream, NOT pure gray); main content #FFFFFF — the contrast is intentional.
• Row height: 28px (denser than typical 36px sidebars to support deep nesting).
• Indentation: 18px per level (~equal to icon width), with no visible guide lines.
• Chevron: 14px, color #9B9A97, rotates 90° on expand with 100ms ease-out.
• Hover state: rgba(55,53,47,0.05) row, '+' and '...' icons fade in at right.
• Active page: rgba(55,53,47,0.08) row + bold 14px/600 weight on title.

What To Copy

• Use a warm off-white (#F7F6F3) for sidebar instead of #FFFFFF or gray — it disambiguates from main content while staying calm.
• 18px indentation per level is the sweet spot — 16px feels cramped, 24px wastes horizontal space at deep nesting.
• Reveal action icons on hover only — always-visible '...' menus add visual noise to long lists.
• Active state via background tint + font-weight bump (not color change) reads as 'selected' without being loud.

What To Skip

• Deep nesting (>5 levels) becomes unreadable; consider breadcrumb badges at level 4+.
• The drag-to-reorder is finicky on touch devices — provide a long-press alternative.

Screenshot Hint

scout query: notion sidebar nested pages cream background emoji icons chevrons

Demonstrates

• Off-white sidebar backgrounds (cream, not gray) feel warmer than typical productivity tools.
• Density is power-user-friendly when nesting goes deep (28px rows over 36px).
• Hover-revealed actions reduce visual noise at rest while preserving discoverability.