Sidebar

Installation

›pnpm dlx shadcn@latest add @evolphin/sidebar

import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";

<SidebarProvider>
  <AppSidebar />
  <main>
    <SidebarTrigger />
    {children}
  </main>
</SidebarProvider>

A sidebar is composed of the following parts:

SidebarProvider: Handles collapsible state.
Sidebar: The main container.
SidebarHeader, SidebarContent, SidebarFooter: Sticky header/footer and scrollable content.
SidebarGroup: Section within content.
SidebarMenu: List of navigation items.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Default open state.
`open`	`boolean`	-	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	-	Open state change handler.

Prop	Type	Default	Description
`side`	`"left" \	"right"`	`"left"`
`variant`	`"sidebar" \	"floating" \	"inset"`
`collapsible`	`"offcanvas" \	"icon" \	"none"`

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether the button is active.
`variant`	`"default" \	"outline"`	`"default"`
`size`	`"default" \	"sm" \	"lg"`
`tooltip`	`string \	TooltipContentProps`	-