组件
Navigation 工作区导航
页面导航用链接，局部值切换用选择控件。
SidebarSection 组织可折叠分组，SidebarItemContent 负责图标、名称和计数的视觉；NavigationTabs 在相关页面之间导航。路径、当前项和导航行为始终由应用传入。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/navigation.json首次使用请先完成 Registry 与主题接入。
变体与组合
NavigationTabs 提供 pill 和 underline。默认渲染原生链接；接入框架 Link 时使用 renderLink 并完整合并传入的 className 和 aria-current。SidebarItemContent 只是内容片段，应放进实际链接或按钮。
Props
| API / 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
NavigationTabs.items | readonly NavigationTab[] | 必填 | { id, label, href, icon?, disabled? } |
activeKey / label | string | 必填 | 当前项和导航区名称 |
variant | pill / underline | pill | 导航呈现 |
renderLink | (item, props) => ReactNode | 原生 a | 框架链接适配 |
SidebarSection.label / collapsed / onToggle | 名称 / 布尔 / 回调 | 必填 | 受控折叠 |
SidebarSection.action | ReactNode | — | 分组辅助动作 |
SidebarItemContent.label | ReactNode | 必填 | 项目名称 |
icon / badge / badgeLabel | 图标 / 计数 / 说明 | — | 计数的可访问表达 |
reserveBadgeSpace | boolean | false | 避免计数变化造成跳动 |
键盘与约束
Tab 逐个访问链接；当前页面使用 aria-current="page"，不是 tabpanel 语义。折叠按钮用 Enter 或 Space 切换，通过 aria-expanded 和 aria-controls 关联内容。
避免这样使用
不要给普通 span 添加 click 伪装导航；不要根据 URL 字符串猜测 activeKey；不要把切换显示密度这种局部操作做成页面链接。
来源与版本
0.1.0，来自 Subtic apps/web/components/sidebar-navigation.tsx、mobile-navigation.tsx 与设置页导航。移除了应用查询、计数和路由映射。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性，原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
SidebarSection
| 属性 | 类型 | 默认值 |
|---|---|---|
label | string | — |
collapsed | boolean | — |
onToggle | () => void | — |
action? | ReactNode | — |
children | ReactNode | — |
className? | string | — |
unstyled? | boolean | false |
slotProps? | {
header?: ComponentProps<"div">;
trigger?: ComponentProps<"button">;
indicator?: ComponentProps<typeof CaretRight>;
content?: ComponentProps<"div">;
} | {} |
SidebarItemContent
| 属性 | 类型 | 默认值 |
|---|---|---|
icon? | ReactNode | — |
label | ReactNode | — |
badge? | ReactNode | — |
badgeLabel? | string | — |
reserveBadgeSpace? | boolean | false |
showIcon? | boolean | Boolean(icon) |
unstyled? | boolean | false |
slotProps? | {
icon?: SpanSlot;
label?: SpanSlot;
badgeSlot?: SpanSlot;
badge?: SpanSlot;
announcement?: SpanSlot;
} | {} |
NavigationTabs
| 属性 | 类型 | 默认值 |
|---|---|---|
items | readonly NavigationTab[] | — |
activeKey | string | — |
label | string | — |
variant? | "pill" | "underline" | "pill" |
className? | string | — |
renderLink? | (
item: NavigationTab,
props: { className: string; "aria-current": "page" | undefined },
) => ReactNode | — |