Intro
The user menu provides access to user-specific settings and information. It is accessed by clicking on the user profile icon within the shell bar, represented by an avatar.
User menu
Anatomy
The user menu popover consists of the following SAP Web Components:
- Popover: Holds all the content of the user menu.
The popover represents the user currently signed in and contains the following information:
- Avatar: A visual element with the user's profile picture. If no profile picture is available, the avatar displays the user's initials. Editing the avatar/profile picture is optional.
- Title: A UI element that displays the user's first and last name.
- Subtitle 1: Shows the unique identifier of the signed-in user, such as an email address or username.
- Subtitle 2: Can display additional details about the user, such as their job role or position.
- Manage Account button: If the product's user profile is managed outside the product itself as a central profile, this button navigates the user to the appropriate experience. Don’t display this button if no central profile is available.
- Other Accounts panel: If the product supports multiple accounts, this panel lists other accounts the user can sign into.
- Manage Accounts icon button: Links to the experience where accounts can be managed.
- User menu items: Displays list items that provide access to standard options, such as Settings, Legal Information, or About. If necessary, you can also include product-specific options that are related to the user.
- Submenu: If necessary, you can add a 2nd-level menu.
- Sign Out: Procedure to exit the product in a secure manner.
Anatomy of the user menu
Interaction
Scrolling
When scrolling, the title snaps into place at the top.
Scrolling – title snaps to the top
Account Switch
Selecting another account under Other Accounts signs the user into the selected account and switches the view from the original account to the new one.
Switching to another account
Responsiveness
The user menu opens on full screen on Size S for touch-enabled devices.
User menu responsiveness – Size S (touch)