用途:在 shadcn 项目中构建应用外壳(侧边栏+顶栏+主内容区)、仪表盘导航、后台侧边栏、可折叠侧导航等持久垂直导航。
主要能力:Sidebar 是 shadcn 目录中最大的单个组件,提供 23 个导出原语、1 个 context hook、3 种折叠行为(offcanvas、icon、none)、3 种布局变体(sidebar、floating、inset)、左右两侧、桌面与移动端分离渲染路径,以及基于 cookie 的状态持久化,是 sidebar-01 至 sidebar-16 区块的共享基础。
使用方式:安装命令为 pnpm dlx shadcn@latest add sidebar,同时会安装 sheet、tooltip、input、skeleton、button、separator 与 use-mobile hook。在客户端子树顶层用 SidebarProvider 包裹一次;服务端布局可读取 sidebar_state cookie 并作为 defaultOpen 传入以避免闪烁,cookie 名称为 sidebar_state,有效期 604800 秒。Provider 绑定 Cmd/Ctrl+B 快捷键。所有导入 Sidebar 原语的文件都必须是客户端模块,需声明 "use client"。推荐从区块起步,如 npx shadcn@latest add sidebar-07。
限制:collapsible="none" 不支持移动端抽屉;variant="inset" 必须与同级的 SidebarInset 配对;collapsible="icon" 应为每个 SidebarMenuButton 设置 tooltip 以保证可访问性。资料未提供收费、价格或其他平台支持信息。