Skip to content
Spira
Navigation

Sidebar

The collapsible icon rail that powers these docs.

Collapsible rail

The icon rail that powers these docs — collapsed for reading, expands on hover, animated icons per row.

import { Sidebar, SidebarBody, SidebarHeader, SidebarLink, SidebarProvider, SidebarTrigger, useSidebar } from "@/components/ui";
import { SparklesIcon, SquarePenIcon } from "@/components/icons";
import { usePathname } from "next/navigation";

// In your layout (a Server Component), read the pin cookie then:
<SidebarProvider defaultPinned={pinned}>
  <Sidebar>
    <SidebarHeader><SidebarTrigger /></SidebarHeader>
    <SidebarBody>
      <SidebarLink href="/design" label="Overview" icon={SparklesIcon} active={pathname === "/design"} />
      <SidebarLink href="/design/button" label="Button" icon={SquarePenIcon} active={pathname === "/design/button"} />
    </SidebarBody>
  </Sidebar>
  <SidebarInset>{children}</SidebarInset>
</SidebarProvider>