Sidebar

A vertical navigation sidebar component with hierarchical menu structure and responsive behavior.

Features

• Collapsible/expandable
• Multi-level menu nesting
• Active item highlighting
• Icon support
• Badge/notification support
• Responsive (drawer on mobile)
• Sticky positioning
• Custom header and footer

Usage

Web (React)

import { Sidebar, SidebarItem, SidebarSection } from '@cuppa/ui'

function MyComponent() {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Sidebar collapsed={collapsed} onToggle={setCollapsed}>
      <SidebarSection title="Main">
        <SidebarItem icon={<HomeIcon />} to="/">
          Dashboard
        </SidebarItem>
        <SidebarItem icon={<UsersIcon />} to="/users" badge="12">
          Users
        </SidebarItem>
      </SidebarSection>

      <SidebarSection title="Settings">
        <SidebarItem icon={<SettingsIcon />} to="/settings">
          Settings
        </SidebarItem>
      </SidebarSection>
    </Sidebar>
  )
}

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  @State private var collapsed = false

  var body: some View {
    CuppaSidebar(collapsed: $collapsed) {
      CuppaSidebarSection(title: "Main") {
        CuppaSidebarItem(icon: "house", title: "Dashboard", destination: .dashboard)
        CuppaSidebarItem(icon: "person.2", title: "Users", badge: "12", destination: .users)
      }

      CuppaSidebarSection(title: "Settings") {
        CuppaSidebarItem(icon: "gearshape", title: "Settings", destination: .settings)
      }
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaSidebar

@Composable
fun MyScreen() {
  var collapsed by remember { mutableStateOf(false) }

  CuppaSidebar(
    collapsed = collapsed,
    onToggle = { collapsed = !collapsed }
  ) {
    CuppaSidebarSection(title = "Main") {
      CuppaSidebarItem(
        icon = Icons.Default.Home,
        title = "Dashboard",
        onClick = { /* navigate */ }
      )
      CuppaSidebarItem(
        icon = Icons.Default.People,
        title = "Users",
        badge = "12",
        onClick = { /* navigate */ }
      )
    }

    CuppaSidebarSection(title = "Settings") {
      CuppaSidebarItem(
        icon = Icons.Default.Settings,
        title = "Settings",
        onClick = { /* navigate */ }
      )
    }
  }
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | collapsed | boolean | false | Sidebar collapsed state | | onToggle | function | - | Toggle callback | | width | string | '250px' | Sidebar width (expanded) | | collapsedWidth | string | '60px' | Sidebar width (collapsed) | | position | string | 'left' | Sidebar position |

Examples

With Nested Menu

<Sidebar>
  <SidebarItem icon={<ProductsIcon />} label="Products">
    <SidebarItem to="/products/all">All Products</SidebarItem>
    <SidebarItem to="/products/categories">Categories</SidebarItem>
    <SidebarItem to="/products/new">Add New</SidebarItem>
  </SidebarItem>
</Sidebar>

With Footer

<Sidebar
  footer={
    <div className="p-4">
      <Avatar src="/profile.jpg" name="John Doe" />
      <Button variant="ghost" onClick={handleLogout}>
        Logout
      </Button>
    </div>
  }
>
  {/* Menu items */}
</Sidebar>

Best Practices

1. Group related items in sections
2. Use clear, descriptive labels
3. Provide visual feedback for active items
4. Consider mobile drawer behavior
5. Keep nesting to 2 levels maximum