Cognition

Components

Sidebar

A composable, collapsible application sidebar — header, grouped menu, and footer, paired with the main content via SidebarInset.

Canonical pattern. The full fe-distillery primitive ships 14 variants (mobile sheet, rail, floating/inset, skeletons, badges, …). This documents the one primary pattern most apps should reach for — the others compose from the same parts.

Preview

Platform
Overview
Toggle the sidebar with the button in the header. Collapsed, it shows icons only — the labels and sub-menu hide.

Live and interactive — hit the toggle to collapse to an icon rail, then switch the theme. Every surface, the active-item highlight, and the brand badge remap from Cognition tokens, no dark: classes.

API

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>{/* brand */}</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>
              <LayoutDashboard />
              <span>Overview</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>{/* user */}</SidebarFooter>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {/* page content */}
  </SidebarInset>
</SidebarProvider>

SidebarProvider owns the expanded/collapsed state (read it with useSidebar); SidebarMenuButton takes isActive and asChild (wrap a Link). Collapsed, button labels and sub-menus hide automatically.

Don't and Do

Don't

Don't hand-roll a fixed aside with bg-gray-50 and ad-hoc collapse state — you'll miss the shared active styling, keyboard focus, and token theming. Compose the provided parts.

Do
<SidebarMenuButton asChild isActive={pathname === "/"}>
  <Link href="/"><LayoutDashboard /><span>Overview</span></Link>
</SidebarMenuButton>
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarFooter,
  SidebarInset,
  SidebarTrigger,
} from "@/components/ui/sidebar";

Wrap the app in SidebarProvider, place a SidebarTrigger in your header, and put page content in SidebarInset.

API matches the canonical parts of fe-distillery/components/ui/sidebar.tsx — SidebarProvider, Sidebar, SidebarMenuButton, SidebarInset, useSidebar, … The bespoke sidebar-* tokens are mapped to Cognition semantic tokens; the 14 sidebar variants are intentionally not all documented here.