UI 菜单相关术语整理（前端/设计通用，附用途、适用场景、命名建议）

一、菜单 Menu 大类

英文 中文释义 说明 适用场景 推荐变量/class名
Menu 菜单 通用总称 所有菜单统称 menu
Mini Menu 迷你菜单 尺寸更小的独立菜单（不是折叠） 侧边悬浮小菜单、弹窗内精简菜单 miniMenu / mini-menu
Minimenu 迷你菜单（合成词） 前端组件库常用合并写法 组件命名、css类名 minimenu
Small Menu 小菜单 描述性叫法，非专业术语 文案描述，不推荐做组件名 smallMenu
Hamburger Menu 汉堡菜单 ☰ 三条横线折叠按钮，点击展开菜单 移动端顶部导航折叠菜单 hamburgerMenu
Dropdown Menu 下拉菜单 点击/悬浮，向下弹出菜单 导航栏下拉、选择器下拉 dropdownMenu
Drop-down Menu 下拉菜单（带连字符） 设计文档写法 产品PRD、设计稿标注 drop-down-menu
Submenu 子菜单 二级/多级下级菜单，菜单里面嵌套的菜单 侧边栏多级导航、嵌套菜单 submenu
Context Menu 上下文菜单 右键弹出菜单（右键菜单） 网页右键、长按弹出菜单 contextMenu
Popup Menu 弹出菜单 悬浮弹出的菜单（不限触发方式） 点击按钮从任意方向弹出 popupMenu
Flyout Menu 飞出菜单 从侧边滑出的菜单（常侧边栏） 桌面端侧边弹出导航 flyoutMenu
Side Menu / Sidebar Menu 侧边菜单 / 侧边栏菜单 页面左侧/右侧常驻菜单 后台管理系统侧边导航 sideMenu / sidebarMenu
Bottom Menu 底部菜单 页面底部固定菜单 移动端底部tab上方菜单 bottomMenu
Tab Menu 标签菜单 Tab切换式菜单 多标签页切换 tabMenu
Accordion Menu 手风琴菜单 展开一项，其他自动收起的折叠菜单 多级侧边导航 accordionMenu
Mega Menu 巨型菜单 导航栏展开带图文的超大下拉菜单 官网顶部导航，带多列图文 megaMenu

二、菜单内元素术语

英文 中文释义 说明
MenuItem 菜单项 菜单里每一行选项
MenuGroup 菜单分组 把多个菜单项分组，带分组标题
MenuDivider 菜单分割线 菜单项之间分隔横线
MenuLabel 菜单标签/分组标题 分组的标题文本，不可点击
MenuHeader 菜单头部 菜单顶部标题区域
MenuFooter 菜单底部 菜单底部区域（如按钮、版权）
MenuIcon 菜单图标 菜单项前面的图标
Shortcut Key / Hotkey 快捷键 菜单项右侧快捷键提示
Badge 徽标 菜单项右上角小红点/数字标记

三、菜单交互状态

英文 中文释义
Active 激活/选中（当前选中项）
Hover 悬浮（鼠标放上去）
Focus 聚焦（键盘Tab选中）
Disabled 禁用（不可点击）
Expanded 展开
Collapsed 收起/折叠
Open 打开（弹窗/下拉已弹出）
Closed 关闭

四、容易混淆区分（重点避坑）

  1. Hamburger Menu ≠ Mini Menu
    • Hamburger：只是☰按钮，用来展开大导航；
    • Mini Menu：本身就是一个尺寸很小的独立菜单组件。
  2. Submenu ≠ Dropdown
    • Submenu：嵌套在菜单内部的下级菜单；
    • Dropdown：从按钮触发向下弹出的菜单（可以不嵌套）。
  3. Context Menu：右键菜单，不要叫popup menu（popup是泛称）

五、命名规范小建议（前端）

  • 驼峰（JS变量/React/Vue组件）：miniMenu、hamburgerMenu、menuItem
  • kebab短横线（CSS class、HTML属性）：mini-menu、hamburger-menu
作者：月影鹏鹏  创建时间：2026-10-17 08:57
最后编辑：月影鹏鹏  更新时间：2026-10-17 08:58