name | UserMenuName | — | The person's name. It is the avatar's initials source and the header title. Empty shows a skeleton line. |
onSignOut | () => void | Promise<void> | — | Called when a person presses Sign out. When it returns a promise the row shows a spinner, reads signingOutLabel,
is aria-busy, and ignores further presses until the promise settles; then the menu closes. A rejection is left
to the app and still closes the menu. |
signingOutLabel | LocalizedMessage | — | Label of the sign out row while onSignOut is pending. |
signOutLabel | LocalizedMessage | — | Label of the sign out row. |
align | Align | "end" | Alignment along that edge. |
appearance | AppearanceMode | — | Controlled appearance preference. Pair with onAppearanceChange. |
appearanceLabels | UserMenuAppearanceLabels | — | Names of the appearance choices. Passing it shows the Theme row. |
appearanceSectionLabel | LocalizedMessage | — | Visible heading of the Appearance section: Theme, Reduce motion, Reset layout and Zoom. Without it those rows sit in
the menu with no heading. |
applicationSound | number | — | Controlled application sound level from 0 to 15. Pair with onApplicationSoundChange. |
applicationSoundLabel | LocalizedMessage | — | Label of the Application sound row. Shows the row when paired with applicationSound and onApplicationSoundChange. |
avatarSrc | string | — | Trusted image URL of the person's photo. Without it, or when it fails to load, the initials show. |
className | string | — | @deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern. |
defaultAppearance | AppearanceMode | AppearanceMode.System | Initial appearance preference when uncontrolled. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
defaultReduceMotion | boolean | false | Initial reduce motion preference when uncontrolled. |
disabled | boolean | — | Disables the trigger. |
email | DisplayValue | — | The person's email. It is truncated in the header and its full text is the title. Empty shows a skeleton line. |
headsetVolume | number | — | Controlled headset volume from 1 to 15. Pair with onHeadsetVolumeChange. |
headsetVolumeLabel | LocalizedMessage | — | Label of the Headset volume row. Shows the row when paired with headsetVolume and onHeadsetVolumeChange. |
initials | UserMenuName | — | Text shown when there is no photo. Defaults to the first letters of the first two words of name. |
items | readonly UserMenuItem[] | — | Extra account actions, drawn as rows after the rule below the preferences and before Sign out. Off by default: with
none the menu is the design's menu. Pass only actions the person can take from the account menu, such as
Diagnostics for a super admin. |
onAppearanceChange | AppearanceChangeHandler | — | Called when a person picks an appearance. UserMenu only reports; the app applies it, for example by setting
data-theme on <html>. The menu stays open. May be canceled. |
onApplicationSoundChange | ApplicationSoundChangeHandler | — | Called when the application sound slider changes. May be canceled. |
onHeadsetVolumeChange | HeadsetVolumeChangeHandler | — | Called when the headset volume slider changes. May be canceled. |
onOpenChange | UserMenuOpenChangeHandler | — | Called on trigger press ("trigger-press"), item press ("item-press"), Tab ("focus-out"), and Escape or an
outside press ("light-dismiss", not cancelable). |
onReduceMotionChange | ReduceMotionChangeHandler | — | Called when a person flips the switch. UserMenu only reports; the app applies it by setting data-motion="reduced"
on <html>. The menu stays open. May be canceled. |
onResetLayout | (() => void) | — | Called when the person presses the Reset layout row in the Appearance section. The row renders
only when this callback is set. UserMenu does not confirm: the host implements confirmation or undo before applying
the reset (destructive-action-has-confirmation-or-undo). The menu stays open. |
onZoomChange | ZoomChangeHandler | — | Called when the zoom slider changes. May be canceled. |
open | boolean | — | Controlled open state. Pair with onOpenChange. |
reduceMotion | boolean | — | Controlled reduce motion preference. Pair with onReduceMotionChange. |
reduceMotionLabel | LocalizedMessage | — | Label of the Reduce motion switch row. Passing it shows the row. |
ref | Ref<HTMLButtonElement> | — | Ref to the trigger button. |
resetLayoutButtonLabel | LocalizedMessage | {@link USER_MENU_DEFAULT_RESET_LAYOUT_BUTTON_LABEL } | Visible text of the Button at the inline end of the Reset layout row. It hugs its content and names the control. |
resetLayoutInfo | LocalizedMessage | {@link USER_MENU_DEFAULT_RESET_LAYOUT_INFO } | Guidance in the tooltip of the info icon after the Reset layout label. The tooltip opens on hover over the icon and
while the button holds keyboard focus, and assistive technology reads it as the button's description. |
resetLayoutLabel | LocalizedMessage | {@link USER_MENU_DEFAULT_RESET_LAYOUT_LABEL } | Label of the Reset layout row, at its inline start. The row's button carries the accessible name. |
showName | boolean | false | Shows the name and a chevron beside the avatar from 640px of viewport width up. Below that only the avatar shows. |
showZoom | boolean | false | When true, the Zoom preference row may render if its label, value and handler are set. The shell sets this; UserMenu
does not read the user agent. |
side | Side | "block-end" | Preferred edge of the trigger. |
soundSectionLabel | LocalizedMessage | — | Visible heading of the Sound section: Headset volume and Application sound. Without it those rows sit in the menu
with no heading. |
trigger | ReactElement<MenuControlChildProps, string | JSXElementConstructor<any>> | — | A control that opens the menu in place of the avatar button; see {@link UserMenuCustomTriggerProps}.
The control that opens the menu, usually a Button. UserMenu adds aria-haspopup="menu", aria-expanded, the
press and arrow-key handlers and, on close, returns focus to it; the control's own handlers run first and its ref
is kept. Name it with its own label, and set disabled, className and ref on it, not on UserMenu. |
triggerLabel | (string & { readonly [LOCALIZED_MESSAGE_BRAND]: true; }) | — | Name of the avatar trigger. Required with it; see {@link UserMenuAvatarTriggerProps}.
Accessible name of the avatar trigger, such as "Dana Levi, account menu". It includes the person's name. |
zoom | number | — | Controlled zoom level in percent, from 80 to 150. |
zoomLabel | LocalizedMessage | — | Label of the Zoom row. With {@link UserMenuBaseProps.showZoom} true, shows the row when paired with zoom and onZoomChange. |