侧边菜单

Sidebar Menu

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

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

详细解释

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

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

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

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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

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