导航与展开@neumorphism-ui/sidebar

Sidebar

SidebarProvider 管理桌面、移动状态以及 Ctrl/Cmd+B 快捷键。桌面可完全收起或保留图标宽度，移动端复用现有 Sheet。菜单、提示和焦点状态继续使用现有新拟态 token。

@neumorphism-ui/sidebar

Registry JSON

预览

概览

查看当前项目最重要的信息。

安装

npx shadcn@latest add @neumorphism-ui/sidebar

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

"use client";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuLink,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

Example

export default function Example() {
  return <SidebarProvider className="min-h-80">
    <Sidebar collapsible="icon">
      <SidebarHeader><strong>Workspace</strong></SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>导航</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem><SidebarMenuLink href="#overview" isActive tooltip="概览"><span aria-hidden="true">⌂</span><span>概览</span></SidebarMenuLink></SidebarMenuItem>
              <SidebarMenuItem><SidebarMenuLink href="#settings" tooltip="设置"><span aria-hidden="true">⚙</span><span>设置</span></SidebarMenuLink></SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
    <SidebarInset><header className="p-3"><SidebarTrigger label="切换侧边栏" /></header><section id="overview" className="p-4">工作区概览</section></SidebarInset>
  </SidebarProvider>;
}

API 参考

组件	属性	类型	默认值	说明
`SidebarProvider`	`defaultOpen / open / onOpenChange`	`boolean / controlled state`	`—`	管理桌面侧边栏的初始或受控打开状态。
`Sidebar`	`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`	选择折叠后完全隐藏还是保留图标宽度。
`Sidebar`	`side / variant`	`"left" \| "right" / "sidebar" \| "floating" \| "inset"`	`—`	选择侧边栏方向和表面样式。
`SidebarTrigger`	`label`	`string`	`"Toggle sidebar"`	本地化折叠按钮的无障碍名称。
`SidebarMenuButton / SidebarMenuLink`	`isActive / tooltip`	`boolean / string`	`—`	标记当前目标，并在图标折叠时提供 tooltip。

预览

安装

用法

Import

Example

API 参考

无障碍