information
This component is relevant for UX Consistency Product Standard UXC-020 – User Menu.

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 comprises of the following SAP Web Components:

  1. Popover: Holds all the content of the user menu.

The popover represents the user currently signed in and contains the following information:

  1. 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.
  2. Title: A UI element that displays the user's first and last name.
  3. Subtitle 1: Shows the unique identifier of the signed-in user, such as an email address or username.
  4. Subtitle 2: Can display additional details about the user, such as their job role or position.
  5. Additional Information: An extra line intended to present supplementary details. This information is not displayed within the Accounts panel.
  6. "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.
  7. "Manage Accounts" icon button: Links to the experience where accounts can be managed.
  8. "Accounts" panel: If the product supports multiple accounts, this panel lists other accounts the user can sign into.
  9. 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.
  10. Submenu: If necessary, you can add a second-level menu.
  11. "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 in full screen on Size S for touch-enabled devices.

User menu responsiveness – Size S (touch)

Guidelines

Implementation

Specifications

Product Standard UX Consistency