Navigieren auf


1. What does the component do?

  • It is used for login/logout, role selection and provides the logged-in user with a menu with comprehensive functions.

2. When should the component be used?

  • Whenever the user should be able to log into an application.

3. Rules

  • The user menu is always positioned in the header and can only be used there.
  • The extended user menu can be closed by clicking outside of the dropdown.
  • The last menu item in the list is always ‘log out’.
  • Icons can optionally be used in menu items.

4. Variants and statuses

The component has the following statuses:

  • LoggedOut
  • Collapsed
  • Expanded
  • Hover

4.1 Standard

Image of the user menu component in the standard variant

Design specification

Code specification

4.2 Role selection

Image of the user menu component with role selection

Design specification

Code specification