跳到主要内容
Termlib

UI 组件 · 导航

侧边菜单

Sidebar Menu

也叫：侧边栏、侧边导航、左侧菜单、Side Nav、Sider

竖着排在页面左侧的导航菜单，能放很多栏目并按层级展开，常见于后台管理系统和文档站。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

页面左侧做一个宽 220px、贯穿全高的侧边菜单，每项前有图标。「订单管理」「用户管理」有二级菜单，点击展开或收起；当前页对应的菜单项背景高亮，父级保持展开。底部放折叠按钮，收起后只剩 64px 宽的图标列，悬停图标时用文字提示显示名称。

发给

01判断

你的内容是这样吗？

对照两列，确认侧边菜单是不是你要找的。

符合这些情况，用侧边菜单

  • 后台管理、数据平台这类一级栏目多、还有二三级子栏目的系统
  • 用户需要在各个功能模块之间频繁来回切换、随时看到全部入口时
  • 页面横向宽度充足，左侧留出 200px 左右不影响主内容时
  • 文档站按章节组织内容、目录层级较深时

是这些情况，换成别的

  • 栏目只有三五个的官网或营销页

    改用顶部导航栏

  • 手机等窄屏页面，常驻侧栏会挤占内容，应改成抽屉或底部标签栏

  • 只是在同一页面里切换几块内容

    改用标签页

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

02避坑

常见坏用法

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

  1. 01

    只有三四个菜单项也做成固定的侧边栏，留下大片空白浪费宽度

  2. 02

    子菜单嵌套到四五层，用户找不到入口，也看不出当前位置

  3. 03

    当前页对应的菜单项没有高亮，父级也没有展开

03识别

怎么认出它

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

结构

由纵向容器、带图标的菜单项、可展开的子菜单组和底部折叠按钮组成，常与顶部导航栏搭配使用。

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

识别特征

  1. 1页面左侧一条贯穿上下的竖栏，常为深色或浅灰底
  2. 2一列带图标的菜单文字，部分项右侧有展开箭头
  3. 3某一项背景高亮，下方缩进显示子菜单

04解释

详细解释

侧边菜单沿页面左侧纵向排列，每一项是一个栏目，带子栏目的项可以点开展开下一级。因为是竖着排，能放下的栏目比顶部导航栏多得多，十几二十个也不拥挤，所以后台、控制台、文档站几乎都用它。

它通常支持收起：只剩一列图标，把空间让给右侧内容区。当前所在的菜单项会高亮，所在的父级保持展开，让用户知道自己的位置。

很多系统是「顶部导航栏 + 侧边菜单」组合：顶栏放产品 Logo 和个人信息，侧边菜单放业务栏目。如果只是在一个页面里切换几块内容，应该用标签页，不需要侧边菜单。

开发者信息
术语 ID
component-sidebar-menu
DOM 选择器

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

  • aside nav
  • nav[aria-label*="sidebar" i]
  • aside [role="menu"]
  • .ant-layout-sider
  • .ant-menu-root.ant-menu-inline
  • .ant-menu-root.ant-menu-vertical
  • .el-aside
  • ul.el-menu--vertical:not(.el-menu--popup)
  • [class*="MuiDrawer-docked"]
  • .arco-layout-sider
  • .arco-menu-vertical
  • .t-default-menu
  • .n-layout-sider
  • .n-menu--vertical
  • [data-slot="sidebar"]
  • .nav.flex-column
  • aside:has(> nav)
  • aside:has(> div > nav)
  • [data-slot="sidebar-menu-button"]
  • [data-slot="sidebar-menu"]
类名关键词

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

  • sidebar
  • side-bar
  • sidenav
  • side-nav
  • side-menu
  • sidemenu
  • sider
  • aside
  • left-nav
  • leftnav
  • left-menu
  • left-sidebar
  • nav-sidebar
  • sidebar-nav
  • sidebar-menu
  • vertical-nav
  • app-sidebar
  • nav-rail
组件名

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

  • Sidebar
  • SideNav
  • SideMenu
  • Sider
  • AppSidebar
  • SidebarNav
  • NavSidebar
  • Aside
  • NavRail
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • <aside>
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 贴边满高
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30