左侧栏布局Sidebar

页面结构

用侧边导航配合右侧主要工作区

先知道

导航菜单 Menu

侧栏布局常见于后台和工具产品，左侧组织层级，右侧是主要工作区。要明确侧栏宽度、折叠方式和内容区最小宽度；窄屏上通常改成可开关的抽屉。

什么时候用

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

什么时候不用

侧栏塞公告、广告、推荐位，导航反而找不到
公告广告
内容区宽度写死，侧栏一收起就露出一条白缝
width: 960px
手机上还留全宽侧栏，正文挤成一条缝
手机上还留全宽侧栏，正文挤成一条缝
层级深还默认全部展开，一屏装不下 → 见树形控件 Tree
▾全部展开
▾节点
子节点
▾节点
子节点
默认全展开，一屏装不下

组成结构 · Anatomy

1侧栏Sidebar层级导航的家，可宽可窄可收起

2顶栏Header面包屑、搜索、用户头像的位置

3内容区Main表格、表单等工作内容，随侧栏伸缩

常见变体 · 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

陈默

周五评审会的材料先发你

昨天