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 outlined chip at the inline end of the Reset layout row. The chip is decorative: the row is the
control. |
resetLayoutLabel | LocalizedMessage | {@link USER_MENU_DEFAULT_RESET_LAYOUT_LABEL } | Label of the Reset layout row, at its inline start. It is also the row's 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. |