sidebar

Installation

Import SidebarProvider and sidebar primitives from `@/components/kamod-ui/sidebar`.

pnpm add @kamod-ch/ui

Wrap the layout in SidebarProvider, render Sidebar next to SidebarInset, and toggle with SidebarTrigger.

import { Sidebar } from "@/components/kamod-ui/sidebar";

<Sidebar />

A sidebar with grouped navigation and an inset content area.

Use variant="inset" for a padded floating content panel.

Props, slots and variants for this component.

Sidebar component props and accepted values.

Prop	Type	Default
SidebarProvider defaultOpen	`boolean`	`true`
Sidebar collapsible	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`
Sidebar variant	`"sidebar" \| "floating" \| "inset"`	`"sidebar"`
Sidebar side	`"left" \| "right"`	`"left"`
SidebarTrigger	`toggle button`	`recommended`

Ensure sidebar navigation remains keyboard reachable. SidebarTrigger includes an accessible label; on mobile the sidebar opens in a sheet dialog.