Day 18 · Sidebar 侧边栏：选项多，放一侧

Sidebar 侧边栏把导航入口放在界面前导侧，帮助用户在 App 区域或顶层内容集合之间切换。1 它适合「入口多、常切换、需要长期看见当前位置」的产品，不适合拿来承载一次性设置或小屏常驻导航。

图 1｜封面：Sidebar 的核心记忆点是「选项多，放一侧」。

图 2｜定义与边界：Sidebar 更像长期导航；Drawer 更像临时展开的面板；Tab Bar 更适合少量同级内容切换。Material Design 把 navigation drawer 分为 standard 和 modal 两类，并建议把高频目的地放在顶部、相关目的地分组。2

图 3｜常见形态：固定侧栏、可折叠侧栏、图标紧凑侧栏、分组菜单。Ant Design 的 Layout.Sider 支持折叠、响应式断点和固定侧栏等形态，同时也提醒 aside navigation 会占用内容的横向空间。3

图 4｜使用口诀：多入口、常切换，才上侧边栏。Carbon 建议在二级导航项超过 5 个，或用户需要频繁切换二级项时使用左侧面板；同时不建议把三层导航塞进左侧面板。4 Microsoft NavigationView 也把左侧导航用于多个顶层分类，并提供展开、紧凑、最小化等自适应显示模式。5

一句话判断：如果用户需要反复在多个模块之间找路，就用 Sidebar；如果只是临时打开一层设置或详情，优先考虑 Drawer；如果只有 2-4 个同级页面，Tab Bar 往往更轻。