UI components · Accounts
User Menu
Also called: Account menu, Profile menu, Avatar menu, User dropdown
The personal menu that opens from the avatar in the top-right corner. It shows who's signed in and holds the "about me" links like profile, account settings, switch team, and sign out.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd a user menu on the right side of the top navbar. The trigger is a 32px round avatar plus the name "Emma Wilson" and a ▾ arrow. The whole thing is clickable and gets a light gray background on hover. On click, open a 240px-wide menu below and to the right. At the top, show a 40px avatar, the name, the email emma@acme.com, and a small "Pro" tag. Then a group with "Profile," "Account settings," and "Billing & plan"; then a group with "Switch team ›" (a submenu listing all teams, with a check on the current one) and "Help & feedback"; and finally, set apart with a divider, "Sign out." Each item is 36px tall with a 16px icon on the left. Close on a click outside or Esc, and let arrow keys move between items. When nobody is signed in, show "Log in" and "Sign up free" buttons here instead.
Send to
01Decide
Does your content look like this?
Check both columns to confirm User Menu is what you need.
Use User Menu when
- Sites and apps with sign-in, to offer profile, account settings, and sign out in the top-right corner
- When one person belongs to several teams, organizations, or workspaces and needs to see and switch the current one at any time
- Giving personal preferences like theme and language a fixed, easy-to-find home
Pick something else when
The product's feature links (orders, reports, admin). Those go in the sidebar menu or navbar.
Use insteadNavbarVisitors who aren't signed in. That spot should just show log in and sign up buttons.
Showing lots of personal info and stats. Make a separate profile page.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Stuffing business menus like orders, reports, and system settings into the user menu, making a list of a dozen items with sign out stuck in the middle
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
The menu doesn't show which account is signed in, so people with several accounts don't know which one they're using
- 03
Only the tiny 24px avatar is clickable, the name and arrow do nothing, and the keyboard can't open it
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
An avatar trigger (avatar, optionally with a name and arrow) and a pop-up menu. The top of the menu shows the current account, the middle holds grouped personal links (profile, settings, billing, switch team), and sign out sits in its own group at the end.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Almost every product with sign-in has a user menu. There's an Avatar in the top-right of the navbar (or at the bottom of the sidebar), often with a name and a small arrow. Click it and a menu opens. At the top: the avatar, display name, and email, sometimes a plan or role. In the middle: profile, account settings, billing, switch team or organization, theme, and language. At the very bottom, in its own group: "Sign out." When nobody is signed in, that spot shows "Log in" and "Sign up free" buttons instead.
It's a special-purpose Dropdown Menu, and everything in it is about "this person, this account." The product's actual features (orders, reports, system settings) belong in the Sidebar Menu or Navbar, so don't cram them in here. It's also not the Notification Center. The bell opens a list of messages, while the avatar opens account links. The two usually sit next to each other in the top-right.
Keep it to 6 to 8 items, grouped with dividers. Put "Sign out" last and set it apart from the rest, but it doesn't need to be a big red button. Always show which account is signed in at the top of the menu, especially in products with multiple accounts or teams. Make the trigger big enough (avatar and name both clickable), and support the keyboard: Enter to open, arrow keys to move, Esc to close.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-user-menu- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[aria-haspopup="menu"]:has([data-slot="avatar"], .ant-avatar, .el-avatar, [class*="MuiAvatar-root"], .arco-avatar, .t-avatar, .n-avatar, img[alt*="avatar" i], img[alt*="头像"]).ant-dropdown-trigger:has(.ant-avatar).el-dropdown:has(.el-avatar).ant-pro-global-header-header-actions-avatar[role="menu"]:has(a[href*="logout" i], a[href*="signout" i], a[href*="sign-out" i], a[href*="log-out" i]).cl-userButtonTrigger.cl-userButtonPopoverCard
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
user-menuuser-dropdownaccount-menuaccount-dropdownprofile-menuprofile-dropdownavatar-menuavatar-dropdownuser-navnav-user
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
UserMenuUserDropdownAccountMenuProfileMenuAvatarDropdownNavUserUserNavUserButton
- Semantic tags and roles
A weak signal. It only counts together with other cues.
role=menu
- Priority
- 3 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026