UserMenu

<ui5-user-menu> | Since 2.5.0

info

The following entity is available under an experimental flag and its API and behavior are subject to change.

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

open

Description	Defines if the User Menu is opened.
Type	boolean
Default	false

opener

Description	Defines 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.
Type	HTMLElement | string | undefined
Default	undefined

showManageAccount

Description	Defines if the User Menu shows the Manage Account option.
Type	boolean
Default	false

showOtherAccounts

Description	Defines if the User Menu shows the Other Accounts option.
Type	boolean
Default	false

showAddAccount

Description	Defines if the User Menu shows the Add Account option.
Type	boolean
Default	false

Slots

default

Description	Defines the menu items.
Type	Array<UserMenuItem>

accounts

Description	Defines 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.
Type	Array<UserMenuAccount>

Events

avatar-click

Description	Fired when the account avatar is selected.
Type	CustomEvent
Bubbles	No
Cancelable	No

manage-account-click

Description	Fired when the "Manage Account" button is selected.
Type	CustomEvent
Bubbles	No
Cancelable	No

add-account-click

Description	Fired when the "Add Account" button is selected.
Type	CustomEvent
Bubbles	No
Cancelable	No

change-account

Description	Fired when the account is switched to a different one.
Type	CustomEvent<UserMenuOtherAccountClickEventDetail>
Parameters	prevSelectedAccount: UserMenuAccount The previously selected account. selectedAccount: UserMenuAccount The selected account.
Bubbles	No
Cancelable	Yes - via preventDefault()

item-click

Description	Fired when a menu item is selected.
Type	CustomEvent<UserMenuItemClickEventDetail>
Parameters	item: UserMenuItem The selected user menu item.
Bubbles	No
Cancelable	Yes - via preventDefault()

sign-out-click

Description	Fired when the "Sign Out" button is selected.
Type	CustomEvent
Bubbles	No
Cancelable	Yes - via preventDefault()

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples