跳到主要内容
前端术语库

UI 组件 · 账号

用户菜单

User Menu

也叫：头像菜单、账号菜单、个人菜单、Account Menu、Profile Menu、User Dropdown

点右上角头像弹出的个人菜单：显示当前登录的账号，放个人资料、账号设置、切换团队和退出登录这些「跟我有关」的入口。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在顶部导航栏右侧做一个用户菜单：触发器是 32px 圆形头像加名字「陈静」和 ▾ 箭头，整块都能点，悬停时有浅灰背景。点击后在右下方弹出 240px 宽的菜单：顶部一块显示 40px 头像、名字、邮箱 chenjing@qinghe.com 和一个「专业版」小标签；下面一组是「个人资料」「账号设置」「账单与套餐」，再一组是「切换团队 ›」（二级菜单列出所有团队，当前团队打勾）和「帮助与反馈」；最后用分割线隔开「退出登录」。每项高 36px、左侧 16px 图标。点外面或按 Esc 关闭，方向键可以切换菜单项。未登录时这里改成「登录」和「免费注册」两个按钮。

发给

01判断

你的内容是这样吗？

对照两列，确认用户菜单是不是你要找的。

符合这些情况，用用户菜单

  • 需要登录的网站和应用，在右上角提供个人资料、账号设置和退出登录
  • 一个人属于多个团队、组织或工作区，需要随时看到并切换当前所在的是哪个
  • 把主题、语言这类个人偏好设置放在一个固定、好找的位置

是这些情况，换成别的

  • 产品的业务功能入口（订单、报表、系统管理），应该放在侧边菜单或顶部导航栏

    改用顶部导航栏

  • 还没登录的访客，这个位置应该直接显示登录和注册按钮

  • 需要展示大量个人信息和统计数据时，做一个单独的个人中心页面

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    把订单、报表、系统设置这些业务菜单也塞进用户菜单，十几项一长串，退出登录夹在中间

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    菜单里不显示当前登录的是哪个账号，有多个账号的人不知道自己在用哪个身份

  3. 03

    只有 24px 的小头像能点，名字和箭头点了没反应，也不能用键盘打开

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由头像触发器（头像，可带名字和箭头）和弹出菜单组成；菜单顶部是当前账号信息，中间是分组的个人入口（资料、设置、账单、切换团队），最后是单独一组的退出登录。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1右上角一个圆形头像，旁边常有名字和一个小 ▾ 箭头
  2. 2点开后弹出的菜单最上面是头像、名字和邮箱
  3. 3菜单最后一项是「退出登录」，和上面的项之间有一条分割线

04解释

详细解释

需要登录的产品几乎都有用户菜单：顶部导航栏右上角（或侧边栏底部）放一个 头像，常带名字和一个小箭头；点击后弹出菜单，最上面显示头像、昵称、邮箱，有时还有套餐或角色；中间是个人资料、账号设置、账单、切换团队或组织、主题和语言；最底下单独一组是「退出登录」。没登录时，这个位置换成「登录」「免费注册」按钮。

它是一种特定用途的 下拉菜单，内容只和「当前这个人、这个账号」有关。产品的业务功能（订单、报表、系统设置）属于 侧边菜单 或 顶部导航栏，不要塞进来。它也不是 通知中心：铃铛打开的是消息列表，头像打开的是账号相关的入口，两者通常并排放在右上角。

菜单项控制在 6~8 个，用分割线分组，「退出登录」放在最后并和其他项隔开，不需要做成红色大按钮。菜单顶部一定要显示当前登录的是哪个账号，多账号、多团队的产品尤其重要。触发区域要够大（头像加名字一起可点），键盘能用 Enter 打开、方向键切换、Esc 关闭。

开发者信息
术语 ID
component-user-menu
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [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
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • user-menu
  • user-dropdown
  • account-menu
  • account-dropdown
  • profile-menu
  • profile-dropdown
  • avatar-menu
  • avatar-dropdown
  • user-nav
  • nav-user
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • UserMenu
  • UserDropdown
  • AccountMenu
  • ProfileMenu
  • AvatarDropdown
  • NavUser
  • UserNav
  • UserButton
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • role=menu
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30