左侧栏布局Sidebar

你可能会说

左边一列功能菜单，右边大块区域显示内容，像后台那样。

侧栏布局是一种把层级导航放在页面一侧、把主要任务内容放在另一侧的页面结构后台和工具产品常在左侧用侧栏组织项目、设置或功能入口，右侧留给当前工作区。需要明确侧栏宽度、折叠方式和内容区最小宽度；窄屏通常改成可开关的抽屉，并提供遮罩、关闭入口和正确的键盘焦点。
先知道
导航菜单 Menu
导航
顶栏内容区

什么时候用

  • 侧栏只放层级导航：分组、子菜单交给 导航菜单 Menu
    仪表盘项目成员设置
  • 侧栏可收起：收成一排图标，给内容区让位
    →
  • 内容区随侧栏伸缩：用 flex: 1 占用侧栏之外的宽度
  • 移动端变抽屉：点汉堡按钮滑出，见 抽屉 Drawer
    首页组件模板设置

什么时候不用

  • 侧栏混入公告、广告和推荐位：会降低导航可发现性
    公告广告
  • 内容区宽度固定：侧栏收起后会留下空白区域
    width: 960px
  • 移动端保留全宽侧栏：正文可用宽度不足
  • 层级较深时默认全部展开：应使用 树形控件 Tree 控制展开状态
    ▾全部展开
    ▾节点
    子节点
    ▾节点
    子节点
    默认全部展开，节点关系难以扫读
组成结构 · Anatomy
导航顶栏 · 面包屑 / 搜索 / 头像内容区 · flex: 1
承载层级导航，可设置固定宽度或收起状态
面包屑、搜索、用户头像的位置
表格、表单等工作内容，随侧栏伸缩
常见变体 · Variants
固定侧栏Fixed
后台默认，导航常驻左侧
可收起侧栏Collapsible
内容需要更多横向空间时
抽屉式Drawer
移动端，点汉堡按钮滑出
典型使用场景
后台管理系统
小店后台 📊 仪表盘 🧾 订单管理 📦 商品库 👥 客户 ⚙️ 设置
订单管理
#20260721-018 · 林小满¥ 239.00已发货
#20260721-017 · 陈默¥ 88.00待付款
#20260720-132 · 阿梨¥ 459.00已完成
数据仪表盘
数据看板 📈 概览 🌐 流量来源 🔻 转化漏斗 🔁 用户留存 📑 报表中心
今日访问
12,847
新增用户
1,203
转化率
3.2%
控制台
云控制台 🖥 生产环境 🧪 预发环境 🚀 部署记录 🔔 监控告警 🔑 访问密钥
server-prod-01 运行中
➜ vibekit deploy --prod
构建完成 · 34 个文件 · 2.1s
✓ 已上线 https://app.example.com
多模块工具
效率盒子 📮 收件箱 3 📅 日历 ✅ 待办清单 ☁️ 云盘文件 📝 笔记
收件箱
林小满
方案我看过了，改两处就能发
10:24
GitHub
[vibe-ui] PR #48 已通过审查
09:51
陈默
周五评审会的材料先发你
昨天