Sidebar
NEWA collapsible application sidebar with a hover pill that follows the cursor and a shared-layout active pill that glides between items. Includes nested sections, icon-only mode with tooltips, ⌘B toggle, and a draggable mobile drawer.
Press ⌘B to collapse — or shrink the window for the mobile drawer.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/sidebar
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | SidebarSection[] | undefined | Navigation sections with items, optional titles, badges, and nested children |
| activeId | string | undefined | ID of the active item |
| onActiveChange | (id: string) => void | undefined | Called when an item or child is selected |
| header | React.ReactNode | undefined | Brand/header slot (use useSidebar() to adapt when collapsed) |
| footer | React.ReactNode | undefined | Footer slot above the collapse toggle |
| collapsed | boolean | undefined | Controlled collapsed (icon-only) state |
| defaultCollapsed | boolean | false | Initial collapsed state (uncontrolled) |
| onCollapsedChange | (collapsed: boolean) => void | undefined | Collapse state change callback |
| mobileOpen | boolean | undefined | Controlled mobile drawer open state |
| onMobileOpenChange | (open: boolean) => void | undefined | Mobile drawer open state callback |
| className | string | undefined | Additional class for the aside |