Studiov1.2.3
Studio/Patterns/Sidebar Navigation

Sidebar Navigation

Navigation

Vertical sidebar with grouped links, collapsible sections, and active state indicators. Used for admin and dashboard layouts.

All patterns
Overview
Tokens
Patterns
Use Cases
  • Admin dashboards (RCCS Admin, Marketing Engine)
  • Settings pages with many sections
  • Documentation sites
Do
  • Group related items under section headings
  • Show active state clearly with background and border
  • Make sidebar collapsible on mobile
  • Keep width between 240px-280px
Avoid
  • Nest more than 2 levels of navigation
  • Use the sidebar for marketing pages
  • Hide the sidebar toggle on mobile
  • Place actions (buttons, forms) in the sidebar
Reference component: SidebarNavVariants: 2Token bindings: 5