界面图鉴
侧边栏Sidebar
你可能会问
侧边栏到底是什么？它和顶部导航栏怎么分工？
简单来说
占住左侧一列的竖向导航，把更深的目录常驻在屏幕上。
01 · 拆开看看
这一块由什么组成
它是竖着的导航：占住左侧一列，把更深的目录常驻在屏幕上。顶部导航管大板块，侧边栏管板块内部的层级。组成：
分组标题Group
把导航项按主题分组的小标题。
导航项Items
可点击的目录条目，常带图标。
当前项Active
高亮标记你正在看哪一篇。
折叠开关Collapse
需要空间时把整栏收成一列图标。
02 · 常见变体
同一个零件，几种摆法
一列到底，条目不多时够用。
按主题分组，文档站标配。
收起后只剩图标，桌面工具常用。
03 · 火眼金睛
这个文档站里，哪一块是侧边栏？
四个都在帮你找路，分工完全不同。
点一块试试，看看它叫什么
导航栏Navbar
不是它。顶部那条管全站大板块，是导航栏。
侧边栏Sidebar
就是它！左侧竖排的目录，把板块内部的层级常驻在屏幕上。
面包屑Breadcrumb
不是它。那行带分隔符的路径是面包屑，标记你在第几层。
分页Pagination
不是它。底部的页码是分页，翻的是同层内容，不改变层级。
04 · 用与不用
什么时候该上它
适合
- 文档站、后台管理这类深层级界面
- 导航项超过顶栏容量时
- 需要常驻目录、频繁切换的场景
先别用
- 内容站、落地页——顶栏足够
- 手机上——收进抽屉
- 层级很浅的小站
05 · 想一想
一道题，检查眼力
一个博客站（十几篇文章、两个分类）需要侧边栏吗？
对。侧边栏是为深层级准备的，层级浅时它只是白占一列宽度。
专业感来自内容组织，不来自多一根栏。空荡的侧边栏反而暴露内容少。
十几篇还行，四十篇之后就是灾难——那是列表页该干的活。
06 · 说给 AI 听
让 AI 改它时，这样说
把目录结构（分组和层级）直接给 AI——结构清楚了，样式是顺手的事。
文档页加左侧边栏，按章节分组，当前页高亮
侧边栏窄屏时收进抽屉
侧边栏可折叠成只显示图标
侧边栏固定不随内容滚动
最容易踩的坑
侧边栏吃掉一列宽度，而内容才是主角。目录一屏放得下时，先想想要不要这一栏。