name | UserMenuName | — | The person's name. It is the avatar's initials source and the header title. |
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. |
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. |
defaultStatus | UserMenuStatus | UserMenuStatus.Available | Initial availability 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. |
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[] | — | Account destinations between the header and the preferences. |
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 Reset layout below the preference sliders. The row renders only when this callback
is set and at least one slider row is visible. UserMenu does not confirm: the host implements confirmation or undo
before applying the reset (destructive-action-has-confirmation-or-undo). The menu stays open. |
onStatusChange | StatusChangeHandler | — | Called when availability changes outside the menu. May be canceled. |
onZoomChange | ZoomChangeHandler | — | Called when the zoom slider changes. May be canceled. |
open | boolean | — | Controlled open state. Pair with onOpenChange. |
plan | LocalizedMessage | — | Name of the person's plan, drawn as a badge beside the name in the header. |
preferencesLabel | LocalizedMessage | — | Visible heading of the preferences group. Without it the rows sit in the menu with no heading. |
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. |
resetLayoutLabel | LocalizedMessage | {@link USER_MENU_DEFAULT_RESET_LAYOUT_LABEL } | Label of the Reset layout button. |
showName | boolean | false | Shows the name and a chevron beside the avatar from 640px of viewport width up. Below that only the avatar shows. |
showStatus | boolean | true | When true, draws the presence dot on the avatar while availability state is active. |
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. |
status | UserMenuStatus | — | Controlled availability. Pair with onStatusChange. |
statusLabels | UserMenuStatusLabels | — | Former Set status row labels; optional now that those rows were removed. |
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 | ((LocalizedMessage | ((status: UserMenuStatus) => LocalizedMessage)) & (LocalizedMessage | ((status: UserMenuStatus | undefined) => LocalizedMessage))) | undefined | — | 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 and, when
availability is shown, the current status. A function receives the current status so the name follows an
uncontrolled choice. |
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. |