左侧栏布局Sidebar
你可能会说
左边一列功能菜单，右边大块区域显示内容，像后台那样。
侧栏布局是一种把层级导航放在页面一侧、把主要任务内容放在另一侧的页面结构后台和工具产品常在左侧用侧栏组织项目、设置或功能入口，右侧留给当前工作区。需要明确侧栏宽度、折叠方式和内容区最小宽度；窄屏通常改成可开关的抽屉，并提供遮罩、关闭入口和正确的键盘焦点。
先知道
你可以这样告诉 AI Agent
请把管理后台做成左侧栏布局：按项目、团队、账单和系统分组，右侧内容 flex: 1，侧栏可折叠。手机改为带遮罩和关闭入口的抽屉，并验证打开后的焦点与当前菜单状态。
什么时候用
什么时候不用
- 侧栏混入公告、广告和推荐位：会降低导航可发现性公告广告
- 内容区宽度固定：侧栏收起后会留下空白区域width: 960px
- 移动端保留全宽侧栏：正文可用宽度不足
- 层级较深时默认全部展开：应使用 树形控件 Tree 控制展开状态▾全部展开▾节点子节点▾节点子节点默认全部展开，节点关系难以扫读
组成结构 · Anatomy
承载层级导航，可设置固定宽度或收起状态
面包屑、搜索、用户头像的位置
表格、表单等工作内容，随侧栏伸缩
常见变体 · Variants
固定侧栏Fixed
后台默认，导航常驻左侧
可收起侧栏Collapsible
内容需要更多横向空间时
抽屉式Drawer
移动端，点汉堡按钮滑出
典型使用场景
后台管理系统
数据仪表盘
控制台
多模块工具
快速练习