AppSidebar
AppCollapsible side navigation. Accepts navGroups or navItems with a built-in collapse toggle. The searchable prop adds an inline filter; a header slot (above the nav groups) and a footer slot can host a workspace switcher, a user block or any content. Item badges take a count or any node. The active item, link or button, is marked aria-current="page"; collapsed, the nav reserves no scrollbar gutter, so the icons stay centered.
JD
Jane Doe
Admin
<AppSidebar
navGroups={[
{ label: 'Main', items: mainItems },
{ label: 'Settings', items: settingsItems },
]}
activeId={activeId}
onSelect={setActiveId}
footer={({ collapsed }) => (
<div className={collapsed ? 'p-3 flex items-center justify-center' : 'p-3 flex items-center gap-2'}>
<Avatar name="Jane Doe" size="sm" status="online" />
{!collapsed && <p className="text-xs font-semibold">Jane Doe</p>}
</div>
)}
/><AppSidebar
navGroups={navGroups}
activeId={activeId}
onSelect={setActiveId}
searchable
/><AppSidebar
navGroups={navGroups}
activeId={activeId}
onSelect={setActiveId}
defaultCollapsed
/>ACAcme Corp
<AppSidebar
navGroups={[{ label: 'Main', items: [
{ id: 'analytics', label: 'Analytics', badge: 3 }, // a count
{ id: 'team', label: 'Team', badge: <Badge variant="warning" size="sm" dot>Beta</Badge> }, // any node
] }]}
header={({ collapsed }) => <WorkspaceSwitcher compact={collapsed} />} // above the nav groups
/>