Neumorphism UI

Sidebar

用于桌面可折叠、移动端可打开为面板的常驻应用导航。

预览

工作区导航

为概览与设置菜单项组合图标折叠、提示及内容区域的侧边栏切换按钮。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/sidebar

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

用 SidebarProvider 包裹 Sidebar 和 SidebarInset。将链接分组，标记当前位置，并在内容头部放置有名称的 SidebarTrigger。

"use client";

import { Sidebar, SidebarContent, SidebarInset, SidebarMenu, SidebarMenuItem, SidebarMenuLink, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Example() {
  return (
    <SidebarProvider className="min-h-80">
      <Sidebar>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem><SidebarMenuLink href="/projects" isActive>Projects</SidebarMenuLink></SidebarMenuItem>
            <SidebarMenuItem><SidebarMenuLink href="/settings">Settings</SidebarMenuLink></SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="p-4"><SidebarTrigger /></header>
        <main className="p-4">Your projects</main>
      </SidebarInset>
    </SidebarProvider>
  );
}

API 参考

SidebarProvider 管理桌面和移动状态。焦点位于该 Provider 的内容（包括其移动端 Sheet）中时，Ctrl/Cmd+B 切换对应的 Sidebar。桌面可完全收起或保留图标宽度，移动端复用现有 Sheet。菜单、提示和焦点状态继续使用现有新拟态 token。

组件属性类型默认值说明
SidebarProviderdefaultOpen / open / onOpenChangeboolean / controlled state—管理桌面侧边栏的初始或受控打开状态。
Sidebarcollapsible"offcanvas" | "icon" | "none""offcanvas"桌面端的 offcanvas 在折叠后隐藏，icon 保留图标宽度；none 保持完整宽度和菜单文字。
Sidebarside / variant"left" | "right" / "sidebar" | "floating" | "inset"—选择侧边栏方向和表面样式。
SidebarTriggerlabelstring"Toggle sidebar"本地化折叠按钮的无障碍名称。
SidebarMenuButton / SidebarMenuLinkisActive / tooltipboolean / string—标记当前目标，并在图标折叠时提供 tooltip。

无障碍

  • 01

    导航链接应有真实目标和可读名称，并用 isActive 表示当前位置。

  • 02

    图标折叠后仍保留无障碍名称，tooltip 只是补充而不是唯一名称。

  • 03

    移动端 Sidebar 使用 modal Sheet，可按 Escape 关闭。Ctrl 或 Command+B 只在该 Provider 的内容或其移动端 Sheet 获得焦点时生效，并保留输入区域、输入法组合及已处理的键盘事件。