Sidebar
侧边栏
WebDesktopMobile上手难度: 中等
贴着屏幕一侧的导航面板，可以常驻，也可以从汉堡按钮滑出来。
Live Demo
真的可以点图标态 (80px)
主内容区
你刚才看到的这个：Notion 左边那一列页面树、GitHub 左侧的仓库菜单、你打开 Gmail 时从左边滑出的邮箱文件夹列表，都是 Sidebar。
它到底是什么
Sidebar 是导航的容器形态：桌面端常驻左侧，移动端变成可滑出的面板。它和 Navigation Rail 的区别是——Sidebar 通常带文字标签和分组标题，是「展开态」的导航。
抽屉导航边栏side panel nav侧边菜单
Anatomy · 它由什么组成
Panel面板
固定在侧边，可滑动展开
Header顶部区
Logo / 标题 / 关闭按钮
Nav Group导航分组
带小标题的一组入口
Item导航项
图标 + 文字，可嵌套子项
Scrim遮罩
移动端覆盖内容的半透明层
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 入口多且需要分组和文字标签 | 用 |
| 桌面端希望导航常驻可见 | 用 |
| 移动端需要容纳底部导航放不下的入口 | 用 |
| 页面本身很短、入口只有 2–3 个 | 不用 |
只有三四个入口却占掉 240px 宽度，是明显的空间浪费。
移动端常驻 Sidebar 会让内容区变得很窄。
Similar Patterns
别搞混一句话区分：贴着屏幕一侧的导航面板，可以常驻，也可以从汉堡按钮滑出来。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个可从左侧滑出的 Sidebar，包含「工作区」和「个人」两个分组，移动端用汉堡按钮唤起，桌面端常驻。
不要只对 AI 说
Bad → Better不要这样对 AI 说
左边加个能滑出来的菜单。
改成这样说
加可滑出的 Sidebar（宽 260px）：桌面端常驻，移动端汉堡按钮唤起带遮罩，分组显示「工作区 / 个人」，Esc 可关闭。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。