跳到主要内容
Termlib

UI 组件 · 导航

下拉菜单

Dropdown Menu

也叫：Dropdown、更多菜单、操作菜单、弹出菜单

点击或悬停某个按钮后弹出的一列选项，用来收纳一组相关的操作或跳转链接，选完即收起。

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

怎么跟 AI 说

改成你的业务内容再发

表格每行最右侧放一个「⋯」图标按钮，点击后在按钮下方弹出下拉菜单，包含「编辑」「复制」「导出」，分割线下面是红色的「删除」。菜单宽 160px、白底带阴影，悬停项背景变浅灰。点击菜单外部或按 Esc 键收起，支持用方向键上下切换选项。

发给

01判断

你的内容是这样吗？

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

符合这些情况，用下拉菜单

  • 某个对象有 3 个以上次要操作、全部平铺成按钮会显得拥挤时，例如表格行的更多操作
  • 在头像或账号名下收纳个人设置、切换账号、退出登录等入口时
  • 导航栏某个栏目下有几个子页面，需要悬停或点击展开时

是这些情况，换成别的

  • 在表单里让用户选一个值并提交时

    改用下拉选择

  • 只有一两个操作时，直接放按钮更直观，不必藏起来

  • 页面上最常用的主要操作，藏进菜单会多一次点击，应该做成显眼的按钮

    改用按钮

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

02避坑

常见坏用法

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

  1. 01

    把表单里的选值控件做成下拉菜单，选完后框里不显示已选的值

  2. 02

    页面上唯一的主要操作也藏进「更多」菜单，用户找不到

  3. 03

    菜单里堆了几十个选项又没有搜索，要滚动很久才能找到

03识别

怎么认出它

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

结构

由触发元素（按钮、图标或文字链接）和弹出的菜单浮层组成，浮层内是菜单项，可带图标、分割线、分组标题和二级子菜单。

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

识别特征

  1. 1按钮或图标下方弹出的一个带阴影的小浮层
  2. 2浮层里是一列纵向排列的文字选项，可能带图标
  3. 3选项之间偶尔有分割线，最后一项常是红色的删除

04解释

详细解释

下拉菜单平时只露出一个触发按钮，例如「更多」「⋯」或用户头像，点击后在按钮下方弹出一列菜单项，选择其中一项就执行对应操作并自动收起。它适合收纳次要操作，比如表格行里的「编辑、复制、删除」，或头像下的「个人设置、退出登录」。

它常被和下拉选择混淆：下拉选择是表单控件，选中的值会显示在框里并随表单提交；下拉菜单点完就执行动作，不保留选中状态。它也不同于顶部导航栏，导航栏是常驻在页面上的主入口，下拉菜单只是临时弹出的一组选项。

菜单项较多时用分割线分组，删除这类危险操作放在最后，并用醒目的颜色区分。

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

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

  • [role="menu"]:not(.ant-menu-root):not(.n-menu):not(nav *):not(aside *)
  • .dropdown-menu
  • .ant-dropdown-menu
  • .el-dropdown-menu
  • [class*="MuiMenu-paper"]
  • .arco-dropdown
  • .t-dropdown
  • .n-dropdown-menu
  • [data-slot="dropdown-menu-content"]
类名关键词

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

  • dropdown
  • dropdown-menu
  • menu-dropdown
  • popup-menu
  • actions-menu
  • more-menu
  • menu-popover
  • dropdown-content
组件名

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

  • Dropdown
  • DropdownMenu
  • DropdownMenuContent
  • PopupMenu
  • MenuList
结构特征

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

  • 浮在内容上
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30