Sidebar

A collapsible sidebar navigation component for app layouts.

Installation

bash
npx @smicolon/cli add sidebar

Run init once per project before adding components. See Installation.

Preview

Components

  • Sidebar: Main container
  • SidebarHeader: Header section
  • SidebarContent: Scrollable content area
  • SidebarFooter: Footer section
  • SidebarGroup: Grouped items with label
  • SidebarItem: Navigation item with icon
  • SidebarCollapseButton: Toggle collapse state

Props

PropTypeDefaultDescription
collapsedbooleanfalseCollapses it to icons only.
onCollapsedChange(collapsed) => void—Called when it collapses or expands.
width"sm" | "default" | "lg""default"Width when expanded.
childrenReactNode—The sidebar’s parts.
classNamestring—Extra classes for the component.