Sidebar

组织应用的品牌入口、分组导航与底部操作，支持折叠和独立滚动，适合多页面应用。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于应用左侧分组导航，组合 SidebarSection 与 SidebarItem。页面负责路由和内容；公开 logo / footer 角色可替换内置内容，普通右侧信息列不使用 Sidebar。

sections 提供导航数据；children 与 sections 同时渲染，并非替换关系。
直属 as="logo" 替换标识，as="footer" 进入固定底部；宽度和折叠状态可绑定，默认启用持久化。
导航及滚动区默认名称、内置折叠按钮（含text浮层展开按钮）随LocaleProvider更新；显式ariaLabel优先于Provider消息。

导入

import { Sidebar } from '@snowui-design-system/components';

用法

不带图标

收起状态

可调整尺寸

连续悬停

API 参考

属性	类型	默认值	示例	描述
`sections`	`SidebarSectionData[]`	`[]`	`sections={sections}`	分类数组，每项必填唯一 id，可选 title、collapsible、defaultCollapsed、actions、items、content；content 优先于 items。items 使用 SidebarItemData 的 id、label、icon、href 等字段。
`navigationVariant`	`"icon" \| "text"`	`"icon"`	`navigationVariant="icon"`	导航结构变体；`text` 表示无图标导航，折叠后根宽度与 padding 为零，只保留位于当前页面可视区域左上方的展开按钮；不自动扫描内容推断图标
`collapsed`	`boolean`	`—`	`collapsed`	受控折叠状态，支持 bind:collapsed；未传时从 defaultCollapsed 初始化内部状态。
`defaultCollapsed`	`boolean`	`false`	`defaultCollapsed`	非受控初始折叠状态
`width`	`number`	`220`	`width={42}`	展开宽度，支持 `bind:width`；拖拽右侧边框时实时更新
`minWidth`	`number`	`160`	`minWidth={42}`	可拖拽展开宽度下限
`maxWidth`	`number`	`480`	`maxWidth={42}`	可拖拽展开宽度上限
`resizable`	`boolean`	`true`	`resizable`	是否启用右侧边框调宽命中层
`activeItemId`	`string`	`—`	`activeItemId="Example"`	外部控制的选中项 id；未传时使用内部选择或恢复的持久化值。仅选择状态，不自动替宿主进行路由。
`persistence`	`boolean`	`true`	`persistence`	是否记忆 active item 与各 Section 折叠状态
`persistenceKey`	`string`	`"default"`	`persistenceKey="Example"`	localStorage 实例命名空间；同一页面存在多个 Sidebar 时必须分别设置
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	导航及其滚动区域的可访问名称；省略时随 LocaleProvider 更新，显式值优先，多实例应提供可区分的名称。
`continuousHover`	`boolean`	`true`	`continuousHover`	是否在可用导航项之间移动共享 hover 背景；关闭后恢复逐项 hover，选中状态不受影响。
`onCollapsedChange`	`(collapsed: boolean) => void`	`—`	`onCollapsedChange={(value) => { /* handle value */ }}`	用户点击内置按钮切换后调用，参数为新折叠状态，不可取消。
`onWidthChange`	`(width: number) => void`	`—`	`onWidthChange={(value) => { /* handle value */ }}`	用户调宽时调用，参数为夹取到 minWidth/maxWidth 的整数像素宽度。
`onActiveItemChange`	`(itemId: string) => void`	`—`	`onActiveItemChange={(value) => { /* handle value */ }}`	导航选择或恢复合法持久化选中项时调用，参数为选中项 id；宿主处理内容与路由。
`children`	`Snippet`	`—`	`<Sidebar>Content</Sidebar>`	无参数显式内容，与 sections 同时渲染；直属 as="logo" 替换 Header Logo，as="footer" 放入固定 Footer，其余内容进入导航区。
`parts`	`ComponentPartsOf<{ Indicator: typeof Indicator; SnowUILogo: typeof SnowUILogo; SidebarSection: typeof SidebarSection; SidebarItem: typeof SidebarItem; }>`	`—`	`parts={partsOptions}`	配置调宽交互层使用的 Indicator，以及默认生成的 SnowUILogo / SidebarSection / SidebarItem；Indicator 复用默认状态视觉