UX Recipe

Collapsible Sidebar

A space-efficient navigation pattern that expands on hover or click, keeping the main content area focused while preserving quick access to all sections.

M

States

  • • Collapsed — icons only, 64px wide
  • • Expanded — full labels visible on hover
  • • Active indicator on current route

Motion

  • • Width transition: 300ms ease-out
  • • Label fade-in: 200ms with 100ms delay
  • • Hover triggers expansion; no click required
← Back to Docs