name thatuiuser interface
meatballshorizontal — opens a More menu
kebabvertical — same job, Android/Material home
hamburgerlines, not dots — opens a nav drawer

Open which file?

Choose…
command ellipsisdots in a label = “asks for more input”

Navigation

Four different things, all called “the three dots” — click each one

The Three Dots (Overflow Menu)

/ <button> · aria-haspopup="menu" /

also called kebab menu, meatball menu, hamburger menu, overflow menu, more menu, ellipsis button

Three horizontal dots are commonly called meatballs and three vertical dots a kebab; both usually open an overflow or More menu of secondary actions. Three horizontal lines are a hamburger button and normally open navigation, often in a drawer. An ellipsis inside a label such as “Open…” is punctuation, not an overflow icon: it signals that the command needs more input before it can finish.

Anatomy — every part, named

  1. 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.

  2. 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.

  3. 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.

  4. 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 — paste into your agent

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.

In code

The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).

HTML<button>
ARIAaria-haspopup="menu"
ARIAaria-expanded="true|false"
CSStext-overflow: ellipsisunrelated truncation ellipsis

See also

Search

Describe the UI element you're thinking of