navigation

Sidebar

A vertical navigation panel beside the main content area of a web application.

The sidebar is the navigation backbone of web applications. It provides persistent access to all major sections while keeping the main content area maximally large.

Anatomy

  • Brand/logo area
  • Nav section labels
  • Nav items (icon + label)
  • Active indicator
  • Bottom area (settings, profile, logout)

Variants

Full (icon + label)Collapsed (icon only, 64px)Floating (elevated, gap from edge)Rail (minimal, 64px, always visible)

States

Item: default, hover, activeSidebar: expanded, collapsed

Rules

✓ Do

  • •240px standard width
  • •sticky positioning
  • •Icon + label for all items
  • •Active state on current section

✗ Don't

  • ×Don't go wider than 280px
  • ×Don't hide the sidebar on tablet — collapse to icon-only instead
  • ×Don't use icon-only without a tooltip

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Sidebar: 240px width, sticky, height 100vh, overflow-y auto. Items: 40px height, 12px horizontal padding, icon (20px) + label. Active: accent bg tint + accent text. Collapsed mode: 64px, icon only + tooltip.