Click the round picture at the top right: that avatar button opens and closes the account menu
Account Menu (User Menu)
/ <button aria-haspopup="menu" aria-expanded> · role="menu" /
also called avatar dropdown, profile dropdown, account dropdown, user button (Clerk's name)
“The round profile picture at the top right that opens a small menu” is an account menu, also called a user menu: an avatar button (a button with aria-haspopup="menu") and the menu that hangs from it. In GitHub, Gmail and most web apps the menu opens under the picture with their right edges lined up, starts with who is signed in (name and email), and ends with Sign out. Click is the safe way to open it; a menu that opens on hover only cannot be reached on a phone. It is not an avatar group (a row of overlapping faces), not a hover card (a profile preview with nothing to click), and not the nine-dot waffle menu that often sits beside it.
If you called it…
…you meant Account Menu (User Menu).
Anatomy — every part, named
- 3Identity block
<DropdownMenuLabel>“My name and email at the top of the menu” is the identity block: it says who is signed in, and it is a label, not a row you can click.
Prompt — paste into your agent
Add an account menu (user menu) at the right end of the top bar: a 32px round avatar button showing the user's photo or initials, <button aria-haspopup="menu" aria-expanded>, that opens a role="menu" panel under it (Radix DropdownMenu, align="end") with its right edge flush with the avatar's. Start the panel with the name and email as a label that is not a menu item, then Profile and Settings, a separator, and Sign out last. Open it on click, never on hover only.
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 account menu (user menu; <button aria-haspopup="menu">, role="menu", Radix DropdownMenu, Clerk UserButton). Rule out: it opens on hover only (Ant Design Dropdown's default trigger), so it cannot be opened on a phone or by keyboard; the avatar is an <img> or a <div> with a click handler, so it has no focus ring and ignores Enter and Space; the panel is centered under the avatar and runs off the right edge instead of aligning its right edge; the panel is cut off by a top bar with overflow hidden; the name and email are a menu item, so the arrow keys stop on a row that does nothing; Escape closes it without returning focus to the avatar; a long email is not truncated and widens the panel. 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).
| ARIA | <button aria-haspopup="menu" aria-expanded> | the round picture is a real button |
| ARIA | role="menu" | the panel; its rows are menuitem |
| Radix | <DropdownMenu.Content align="end"> | right edge lines up with the picture |
| shadcn/ui | <DropdownMenuLabel> | the name and email block, skipped by the arrow keys |
| Material UI | <Menu> + <Avatar> | the docs demo is titled Account menu |
| Clerk | <UserButton /> | the whole thing as one component |
See also
From the maker of this site48h Icons · Custom Apple app icons in 48 hours48hicons.com →