Overflow menu 更多菜单

/OH-ver-flow MEN-yoo/ · noun · 操作类模式 · #071

三个点,收着放不下的操作。装不常用的没问题;常用的东西放进去,就等于埋了。

Overflow menu(更多菜单) UI 模式示例:CatchUI 图鉴标本

别名:三个点的菜单、三个点图标、更多按钮。

你可能会这样叫它

  • “三个点的菜单”
  • “右上角的三个点”
  • “竖着的三个点”
  • “更多选项按钮”
  • “点开有更多操作的按钮”

……它的名字是 更多菜单(Overflow menu)。

常见问题

三个点的菜单叫什么?

叫更多菜单(Overflow menu),点开后是一小组放不下的操作。竖着的三个点(⋮)常被叫作 kebab menu(烤串菜单),横着的(⋯)叫 meatballs menu(肉丸菜单);安卓官方叫 overflow menu。

三个点和三条横线的菜单有什么区别?

三条横线是汉堡菜单,藏的是导航——能去哪儿;三个点是更多菜单,藏的是操作——能对这一页或这一项做什么。一个 App 通常只有一个汉堡菜单,三个点却可以出现在每一行、每张卡片上。

代码里叫什么

SwiftUIMenu Image(systemName: "ellipsis.circle")
UIKitUIMenu showsMenuAsPrimaryAction
Jetpack ComposeDropdownMenu Icons.Filled.MoreVert
Android (Views)PopupMenu onCreateOptionsMenu()
FlutterPopupMenuButton Icons.more_vert
Web (HTML / ARIA)<button aria-haspopup="menu"> role="menu" role="menuitem"

复制给 AI 编程工具

给这一项加一个更多菜单:一个三个点的按钮(安卓和网页用竖排 ⋮,iOS 用横排 ⋯),点开后在按钮旁边弹出一小组次要操作。按钮要有无障碍名称(“更多选项”)并标 aria-haspopup="menu";方向键在选项间移动,回车执行,按 Esc 或点外面关闭菜单,焦点回到按钮。最常用的一两个操作留在菜单外面,做成看得见的按钮。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

其他常见图标叫什么(英文)→

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)