The Three Dots (Overflow Menu) 三个点(溢出菜单) web
Horizontal dots, vertical dots, three lines, and an ellipsis mean different things
横排三个点、竖排三个点、三条横线和省略号,含义各不相同
Navigation
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Horizontal dots (meatballs / More)横排三点(肉丸/更多)
button[aria-haspopup="menu"]Three horizontal dots are nicknamed meatballs and usually open an overflow or More menu for the current item or area.
横排三个点昵称「肉丸」,通常打开当前项目或区域的溢出/更多菜单。
Prompt fragmentPrompt 片段a horizontal-dots meatball button (button[aria-haspopup="menu"]): three dots in one row opening the contextual Overflow or More menu
横排三点的「肉丸」按钮(button[aria-haspopup="menu"]):一排三个点,打开当前上下文的溢出或更多菜单
-
2 Vertical dots (kebab menu)竖排三点(烤串菜单)
button[aria-haspopup="menu"]Three vertical dots are nicknamed a kebab and usually expose the same kind of secondary-actions menu.
竖排三个点昵称「烤串」,通常打开同一类次要操作菜单。
Prompt fragmentPrompt 片段a vertical-dots kebab menu button (button[aria-haspopup="menu"]): three stacked dots opening an overflow menu of secondary actions
竖排三点的「烤串」菜单按钮(button[aria-haspopup="menu"]):叠在一起的三个点,打开次要操作的溢出菜单
-
3 Three lines (hamburger menu)三条横线(汉堡菜单)
button[aria-controls]Three horizontal lines are a hamburger button; unlike overflow dots, it normally opens the site's main navigation in a drawer.
三条横线是汉堡按钮;和溢出圆点不同,它通常以抽屉形式打开站点主导航。
Prompt fragmentPrompt 片段a three-line hamburger menu button (button[aria-controls]): the navigation trigger that opens a side drawer, not an overflow actions menu
三条横线的汉堡菜单按钮(button[aria-controls]):打开侧边抽屉的导航触发器,不是溢出操作菜单
-
4 Command ellipsis命令省略号
<button>Open…</button>The ellipsis in “Open…” means the command will ask for more input before it completes; the dots are part of the label.
「打开…」里的省略号表示命令完成前还会要求更多输入;这些点是标签的一部分。
Prompt fragmentPrompt 片段a command ellipsis in the label (<button>Open…</button>): the single ellipsis character means more input is required before the command completes, not that the button opens an overflow menu
标签里的命令省略号(<button>Open…</button>):单个省略号字符表示命令完成前需要更多输入,而不是按钮会打开溢出菜单
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Use the correct three-mark control: a horizontal ellipsis (meatballs) or vertical ellipsis (kebab) button with aria-haspopup="menu" for a contextual Overflow/More menu; a three-line hamburger button with aria-controls for a navigation drawer; or an ellipsis inside a command label such as “Open…” only when the command asks for more input before completing.
用对这三种标记:横排省略号(meatballs)或竖排省略号(kebab)按钮配 aria-haspopup="menu",用于当前项的溢出/更多菜单;三条横线的汉堡按钮配 aria-controls,用于打开导航抽屉;命令标签(如 “Open…”)里的省略号只在该命令执行前还需要更多输入时使用。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my three-dots menu (kebab/meatballs, menu button). Rule out: the icon-only button missing an aria-label; the menu staying open after an item is chosen; outside-click and Escape not closing it; a hit target well under 24px so taps miss on mobile. The symptom:
调试我的三点菜单(kebab/meatballs、菜单按钮)。排除以下可能:纯图标按钮缺少 aria-label;选中菜单项后菜单不关;点外部和按 Escape 都关不掉;点击热区远小于 24px,移动端总点不中。症状是:
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <button> | |
| ARIA | aria-haspopup="menu" | |
| ARIA | aria-expanded="true|false" | |
| CSS | text-overflow: ellipsis | unrelated truncation ellipsis与此无关的截断省略号 |