Customizable Sidebar

The Cockpit sidebar supports drag-and-drop reordering, folder grouping, section dividers, and two-line labels. Personalize your navigation layout to match your workflow.

Features

Drag to Reorder

Click and drag any sidebar item to change its position. Your custom order persists across sessions.

Folders

Group related items into collapsible folders:

📊 Analytics
  ├── Dashboard
  ├── Web Analytics
  └── Revenue
🎯 Marketing
  ├── Ads
  ├── Email
  └── Social

Sections

Add section dividers to visually separate groups without nesting:

── Overview ──
Dashboard
Goals

── Growth ──
Ads
Social
Email

Two-Line Labels

Sidebar items support a second line for descriptions or context:

📊 Dashboard
   Live KPIs & alerts

🎯 Goals
   3 active, 1 paused

How It Works

The sidebar state is stored locally in the browser and synced to the user's preferences. Changes are applied instantly — no page reload needed.

The implementation uses:

• Framer Motion for smooth drag animations
• Local storage for persistence
• React context for sidebar state management