Click the nine dots by the avatar: that button is the waffle, and the grid of apps it opens is its panel
Waffle Menu (App Launcher)
/ <button aria-expanded aria-controls> · <div popover> /
also called waffle icon, waffle button, app switcher, grid icon, Google apps menu
“The grid of nine dots in the top corner” is a waffle menu, or app launcher: an icon button that opens a panel of app tiles, each an icon over a short name. Google puts it beside your profile picture, Microsoft 365 draws nine squares at the top left, and Atlassian's current icon is four squares. While the panel is open the button keeps a pale circle behind it, and an outside click or Escape closes it. The three dots open actions for one item and a hamburger's three lines open page navigation; a bento grid is a page layout, not a menu.
If you called it…
…you meant Waffle Menu (App Launcher).
Anatomy — every part, named
- 2App panel (launcher)
<div popover>“The grid matrix with apps” is the app panel: equal tiles, each an icon over a label, three to a row, anchored under the button.
Prompt — paste into your agent
Add a waffle menu, an app launcher: a round <button aria-expanded aria-controls> at the top right of the header drawing a 3x3 grid of dots (Material Symbols apps) that opens a panel of app tiles anchored under it (HTML popover), each tile an icon over a short label, three to a row. Close it on an outside click or Escape and return focus to the button. Never build it as role="menu", a hamburger or a three-dots menu.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my waffle menu (a nine-dot <button aria-expanded> that opens an app panel). Rule out: the panel clipped by an overflow: hidden header; the panel sliding under a sticky header because of its z-index; aria-expanded never flipping; focus not returning to the button after Escape; the panel running off the right edge on a narrow phone; dots drawn at fractional pixel sizes so they blur; the icon color hard-coded so it vanishes in dark mode; a hit target smaller than 40px. The symptom:
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 aria-expanded aria-controls> | the nine-dot button; a disclosure, not a menu |
| HTML | <div popover> | the panel; an outside click or Esc closes it |
| Material Symbols | apps | nine round dots |
| Fluent UI | WaffleIcon | Microsoft's nine squares |
| Atlassian | <AppSwitcher> | passed to renderAppSwitcher in the top nav |
See also
From the maker of this siteFowlNote · Notes that float over any app, one shortcut awayfowlnote.app →