Overview
The User Menu offers a range of options that are specific to the user and is accessible on all BTP tool screens. Users can access it by clicking on the avatar on the end side of the Tool Header. Apart from always available options, the User Menu can also contain tool-specific actions.
Look and Feel
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
When to Use
Recommended
- Use the User Menu to hold user-specific information, settings, and actions.
- Use the User Menu to display help and legal information.
- Use the User Menu to trigger feedback collection surveys.
- Use the user menu to Sign In or Sign Out.
Not Recommended
- Avoid using the User Menu for navigation.
- Avoid displaying disabled for inactive items. Hide them instead.
Anatomy
Popover and Dropdown Containers
The containers are the UI elements that hold all the content of the User Menu. While the Popover Container is always used to display the main user actions, the Dropdown container is optional.
- Open User Menu in Popover Container
- Avoid having sub-items in Dropdown Containers
See also:
Usage Guideline - Popover and Dropdown Containers
Visual Design - Popover and Dropdown Containers
Menu Items
Both menu item types are available to host the content of the user menu. Consider using all relevant notations for the items - ellipsis, shortcuts, icons, etc.
- Place Emphasized Menu Items in Popovers
- Place Standard Menu Items in Dropdowns
- Avoid using both ellipses and child indicator
- Avoid using menu items for sign in and sign out
See also:
Avatar
The user avatar in the User Menu is a prominent visual element representing the user's profile picture. The Avatar shows the user's initials if a profile picture is unavailable. Lastly, an icon is displayed if the user has not signed in.
User Menu - Icon Avatar
Displayed when the user has not yet signed in the product.
User Menu - Initials Avatar
User initials are displayed when the user has not provided a profile picture.
User Menu - Image Avatar
When the user's profile picture when provided.
Title and Subtitle
The Title is a mandatory UI element that displays the user's First and Last names. The Subtitle is an optional secondary identifier that can display various values: role, position, online status, user ID, etc.
Button
The Button at the bottom of the User Menu is a mandatory UI element that triggers either signing in or out of the tool.
- Always use a button for Sign In or Sign Out
- Always use an emphasized button for Sign In
- Do not use menus for Sign In and Sign Out
- Do not use icons for Sign Out
See also:
Responsiveness
Apart from component sizes getting larger on tablets, the desktop and tablet experiences are identical in interaction. On phones, however, the sub-menus of the user menu cascade by replacing the contents. The sub-menus have a title with a back button and the bottom button.
See also
Resources
Design
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.