Skip to main content

UserMenu

<ui5-user-menu> | Since 2.5.0

The ui5-user-menu is an SAP Fiori specific web component that is used in ui5-shellbar and allows the user to easily see information and settings for the current user and all other logged in accounts.

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/UserMenu.js";

import "@ui5/webcomponents-fiori/dist/UserMenuItem.js"; (for ui5-user-menu-item)

Basic Sample​

Properties​

avatarInteractive​

DescriptionDefines whether the avatar of the selected account is interactive (focusable and pressable).
When false (default), the avatar is rendered as a non-interactive image and is not announced as a button by screen readers.
Note: When showEditButton is set to true, the avatar is treated as interactive regardless of this property's value, to preserve the edit affordance.
Typeboolean
Defaultfalse
Since2.25.0

open​

DescriptionDefines if the User Menu is opened.
Typeboolean
Defaultfalse

opener​

DescriptionDefines the ID or DOM Reference of the element at which the user menu is shown. When using this attribute in a declarative way, you must only use the id (as a string) of the element at which you want to show the popover. You can only set the opener attribute to a DOM Reference when using JavaScript.
TypeHTMLElement | string | null | undefined
Defaultundefined

showEditAccounts​

DescriptionDefines if the User Menu shows the Edit Accounts option.
Typeboolean
Defaultfalse

showEditButton​

DescriptionDefines if the User menu shows edit button.
Typeboolean
Defaultfalse
Since2.7.0

showManageAccount​

DescriptionDefines if the User Menu shows the Manage Account option.
Typeboolean
Defaultfalse

showOtherAccounts​

DescriptionDefines if the User Menu shows the Other Accounts option.
Typeboolean
Defaultfalse

Slots​

accounts​

DescriptionDefines the user accounts.
Note: If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless there is an item with selected property set to true.
TypeArray<UserMenuAccount>

default​

DescriptionDefines the menu items.
TypeArray<UserMenuItem>
DescriptionDefines custom footer content.
Note: When provided, replaces the default "Sign Out" button. Use an empty element to hide the footer completely.
TypeArray<HTMLElement>
Since2.20.0

infoArea​

DescriptionDefines the content of the info area inside the User Menu's account block.
Note: When empty, the User Menu renders unchanged.
TypeArray<HTMLElement>
Since2.24.0

Events​

avatar-click​

DescriptionFired when the account avatar is selected.
TypeCustomEvent
BubblesNo
CancelableNo

change-account​

DescriptionFired when the account is switched to a different one.
TypeCustomEvent<UserMenuOtherAccountClickEventDetail>
ParametersprevSelectedAccount: UserMenuAccount
The previously selected account.
selectedAccount: UserMenuAccount
The selected account.
BubblesNo
CancelableYes - via preventDefault()

close​

DescriptionFired when a user menu is close.
TypeCustomEvent
Since2.6.0
BubblesNo
CancelableNo

edit-accounts-click​

DescriptionFired when the "Edit Accounts" button is selected.
TypeCustomEvent
BubblesNo
CancelableNo

item-click​

DescriptionFired when a menu item is selected.
TypeCustomEvent<UserMenuItemClickEventDetail>
Parametersitem: UserMenuItem
The selected user menu item.
BubblesNo
CancelableYes - via preventDefault()

manage-account-click​

DescriptionFired when the "Manage Account" button is selected.
TypeCustomEvent
BubblesNo
CancelableNo

open​

DescriptionFired when a user menu is open.
TypeCustomEvent
Since2.6.0
BubblesNo
CancelableNo

sign-out-click​

DescriptionFired when the "Sign Out" button is selected.
TypeCustomEvent
Since2.6.0
BubblesNo
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

CSS Custom States​

No CSS custom states available for this component.

More Samples​