VOCABULARY / 词条
侧栏布局
Sidebar Layout
在主内容旁保留一条持久的纵向侧区，用来放置导航、筛选或工具；NN/g 指出左侧纵向导航便于扫视、容纳更多类别，且更容易在不同屏宽下重排。
识别特征
- 一条固定在页面一侧、跨页面保持位置与宽度的纵向区域
- 侧区内是图标加文字标签的行或分组，当前位置有明显高亮
- 主内容区占据剩余宽度，随视口变化而侧区宽度基本不变
概念边界
侧栏是页面级的持久区域，其内容可以是导航、筛选器或工具面板，不一定是对象列表；因此它不同于主从布局——主从中的侧列表选择会驱动详情内容，而侧栏与主内容之间没有这种选择联动。它也不同于单列布局：单列刻意只保留一条内容列，侧栏则始终把辅助区域与主内容并排。窄屏下折叠成抽屉的侧栏仍属侧栏布局。
什么时候考虑它
- 产品有较多平级的一级分区，需要随时切换且未来可能继续增加
- 筛选条件或工具需要在浏览主内容时始终可见、可调整
- 桌面为主的工作台或后台，用户长时间停留并频繁跨分区操作
什么时候慎用
- 内容以顺序阅读或逐项填写为主，侧区会挤占正文宽度而无用处
- 一级分区只有两三个，顶部导航已足够，侧栏只会降低内容与界面的比例
- 侧列表的选择本应驱动右侧详情，这时应按主从布局来设计
取舍
导航与工具始终在手边、易于扩展和扫视；但会持续占用横向空间，长菜单可能有项目被折到视线之外，窄屏下还需要另设折叠或抽屉方案。
条件规则 · 编辑建议
相关词条
两者外形都是分栏，但主从的侧列表选择驱动详情；侧栏承载导航或工具，主内容不由侧区内的对象选择决定。
单列把全部宽度让给顺序内容；侧栏用一部分宽度换取随时可达的导航或工具。
分面筛选器常放在侧栏中，与结果区并排，调整条件时结果上下文不丢失。
可折叠的侧栏用按需展开来回收宽度，但收起后仍应保留可识别的入口。
来源与支持范围
指出左侧纵向导航可容纳更多类别而不必重做导航界面，纵向列表比横向更易于视觉搜索，且更容易适配不同屏宽；代价是内容区变小、长菜单项目可能落到首屏之外；建议不要只用图标而隐藏文字标签，桌面上空间允许时不要折叠成汉堡菜单。
检索日期：2026-09-15说明 navigation 地标用于标识页面或站点导航链接组（对应 HTML nav 元素），complementary 地标用于与主内容并列但可独立成立的辅助区域（对应 aside 元素）；页面上同类地标多于一个时，每个都应有唯一的可访问名称。
检索日期：2026-09-15定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：侧栏是否带有地标角色与可访问名称、当前项是否对辅助技术可知、窄屏折叠后一级导航是否仍有文字可辨、以及侧栏宽度与顺序是否在各页面间保持一致。
{
"states": [
"expanded",
"collapsed",
"drawer"
],
"a11y": [
"侧栏使用带名称的地标角色，可用地标导航直接跳到或跳过",
"当前位置以 aria-current 等方式对辅助技术可知，不只靠颜色",
"折叠状态下展开控件有文字名称并可键盘操作"
],
"motion": "折叠与展开可用短促过渡，并尊重减少动态偏好"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。