跳到主要内容
Termlib

布局模式 · 整体框架

侧边导航+内容

Sidebar Layout

也叫：侧边栏布局、左右布局、后台管理布局、左侧菜单布局、Sidebar Navigation

左侧是一条竖向的功能菜单，右侧是当前菜单对应的页面内容，适合功能模块多、需要频繁切换的后台系统。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

用侧边导航+内容布局：左侧菜单宽 220px，可折叠成 64px 只显示图标，菜单项包括「概览、订单管理（含子菜单）、商品管理、用户管理、系统设置」，当前项高亮；右侧顶部是 56px 高的顶栏，放面包屑和用户头像，下方内容区浅灰背景、内边距 24px。侧栏固定不动，只有内容区滚动。

发给

01判断

你的内容是这样吗？

对照两列，确认侧边导航+内容是不是你要找的。

符合这些情况，用侧边导航+内容

  • 功能模块多（超过七个）或者有两级以上菜单时
  • 用户需要在多个功能模块之间频繁切换的后台管理系统、工具类产品
  • 桌面端使用、每次会停留较长时间处理工作时

是这些情况，换成别的

  • 左栏要展示的是一条条数据记录、点击后看详情时

    改用主从布局

  • 导航只有三五项、一条顶栏就能放下时

  • 面向普通访客的营销页、官网，主要目的是阅读和转化时

    改用顶栏+内容

  • 主要在手机上使用、屏幕放不下常驻侧栏时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    菜单只有三四项却占着一整条侧栏，浪费横向空间

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    侧栏和内容区一起滚动，往下翻时菜单就看不到了

  3. 03

    当前页在菜单里没有高亮，或者子菜单的展开状态和当前页对不上

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

左侧是固定宽度的竖向菜单栏；右侧上方是窄顶栏（面包屑、用户入口），下方是占满剩余空间的内容区。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1左侧一条通高的竖向菜单，常为深色或浅灰底
  2. 2菜单项带图标，部分可以展开子菜单，当前项高亮
  3. 3右侧顶部有面包屑，下方是内容区

04解释

详细解释

侧边导航+内容是后台管理系统的标准框架：左侧一条宽约 200~240px 的竖向菜单，列出「概览、订单管理、商品管理、用户管理、系统设置」等功能模块，可以展开二级菜单；右侧是当前模块的内容区，顶部常有一条窄顶栏放面包屑和用户头像。

竖向排列能放下很多菜单项和多级层级，用户随时能看到系统有哪些功能、自己当前在哪一项。侧栏通常可以折叠成只显示图标的窄条，给内容区腾出空间。

注意它和「主从布局」的区别：侧边导航的左栏是固定的功能菜单，点击后右侧换成另一个功能页面；主从布局的左栏是一条条数据记录，点击后右侧显示这条记录的详情。

开发者信息
术语 ID
layout-sidebar-content
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-layout:has(> .ant-layout-sider)
  • .el-container:has(> .el-aside)
  • .arco-layout:has(> .arco-layout-sider)
  • :is(div, section):has(> aside):has(> main, > [class*="main" i], > [class*="content" i])
  • div:has(> aside):has(> div > main)
  • :has(> [class*="sidebar" i]):has(> main, > [class*="main" i], > [class*="content" i])
  • [data-slot="sidebar-wrapper"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • app-layout
  • admin-layout
  • dashboard-layout
  • sidebar-layout
  • app-shell
  • admin-shell
  • app-wrapper
  • main-layout
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • AppLayout
  • AdminLayout
  • DashboardLayout
  • SidebarLayout
  • AppShell
  • SidebarProvider
  • Layout
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30