From e34d6a9307d9dbc3978466c1873df1e0747d848b Mon Sep 17 00:00:00 2001
From: Svilen Darvenyashki <svilen.darvenyashki@sap.com>
Date: Mon, 18 May 2026 09:46:16 +0300
Subject: [PATCH 1/2] chore(ui5-user-menu): add sample with show second line

---
 .../website/docs/_samples/fiori/UserMenu/Advanced/main.js   | 3 ++-
 .../docs/_samples/fiori/UserMenu/Advanced/sample.html       | 6 ++++++
 packages/website/docs/_samples/fiori/UserMenu/Basic/main.js | 1 +
 .../docs/_samples/patterns/UXCIntegration/Basic/main.js     | 1 +
 .../docs/_samples/patterns/UXCIntegration/Basic/sample.html | 6 ++++++
 5 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js b/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js
index 6ff5c7455efb..4bf5ac97d9cd 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js
+++ b/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js
@@ -1,7 +1,7 @@
 import "@ui5/webcomponents-fiori/dist/UserMenu.js";
 import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
 import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
-
+import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents-fiori/dist/ShellBar.js";
 import "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
@@ -12,6 +12,7 @@ import "@ui5/webcomponents-icons/dist/collaborate.js";
 import "@ui5/webcomponents-icons/dist/official-service.js";
 import "@ui5/webcomponents-icons/dist/private.js";
 import "@ui5/webcomponents-icons/dist/accelerated.js";
+import "@ui5/webcomponents-icons/dist/message-information.js";
 
 const shellbar = document.getElementById("shellbar");
 const menu = document.getElementById("userMenu");
diff --git a/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html b/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
index b4378dce7440..4b1f65824ec7 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
+++ b/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
@@ -59,6 +59,12 @@
 	</ui5-user-menu-item>
 	<ui5-user-menu-item icon="official-service" text="Legal Information"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
+		<ui5-user-menu-item-group check-mode="Single">
+			<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
+			<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
+		</ui5-user-menu-item-group>
+	</ui5-user-menu-item>
 </ui5-user-menu>
 
 <!-- playground-fold -->
diff --git a/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js b/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js
index 9a364d44f509..5bfdd2f98d7c 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js
@@ -11,6 +11,7 @@ import "@ui5/webcomponents-icons/dist/collaborate.js";
 import "@ui5/webcomponents-icons/dist/official-service.js";
 import "@ui5/webcomponents-icons/dist/private.js";
 import "@ui5/webcomponents-icons/dist/accelerated.js";
+import "@ui5/webcomponents-icons/dist/message-information.js";
 
 const shellbar = document.getElementById("shellbar");
 const menu = document.getElementById("userMenu");
diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
index a2d8939a79b1..7efb76a2e87c 100644
--- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
+++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
@@ -46,6 +46,7 @@ import "@ui5/webcomponents-fiori/dist/illustrations/NoNotifications.js";
 import "@ui5/webcomponents-fiori/dist/UserMenu.js";
 import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
 import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
+import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
 
 import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js";
 import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js";
diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
index 9aae172620a2..ea21c8cee935 100644
--- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
+++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
@@ -78,6 +78,12 @@
 				<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
 			</ui5-user-menu-item>
 			<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
+			<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
+				<ui5-user-menu-item-group check-mode="Single">
+					<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
+					<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
+				</ui5-user-menu-item-group>
+			</ui5-user-menu-item>
 		</ui5-user-menu>
 
         <ui5-side-navigation id="side-navigation" class="sideNavigation" slot="sideContent" accessible-name="Main">

From 9260211ffdfd96fa569aebd743582d24399474ba Mon Sep 17 00:00:00 2001
From: Svilen Darvenyashki <svilen.darvenyashki@sap.com>
Date: Mon, 18 May 2026 14:57:20 +0300
Subject: [PATCH 2/2] chore(ui5-user-menu): improve react sample

---
 .../_samples/fiori/UserMenu/Advanced/main.js  |  2 +-
 .../fiori/UserMenu/Advanced/sample.html       |  2 +-
 .../fiori/UserMenu/Advanced/sample.tsx        | 29 +++++++++++++------
 .../_samples/fiori/UserMenu/Basic/main.js     |  2 +-
 .../_samples/fiori/UserMenu/Basic/sample.html |  4 +--
 .../_samples/fiori/UserMenu/Basic/sample.tsx  | 21 ++++++++------
 .../src/components/Editor/ReactPlayground.tsx |  3 +-
 7 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js b/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js
index 4bf5ac97d9cd..eb2276b71885 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js
+++ b/packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js
@@ -21,7 +21,7 @@ const menu = document.getElementById("userMenu");
 
 shellbar.addEventListener("ui5-profile-click", (event) => {
 	menu.opener = event.detail.targetRef;
-	menu.open = true;
+	menu.open = !menu.open;
 });
 
 menu.addEventListener("item-click", function (event) {
diff --git a/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html b/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
index 4b1f65824ec7..623dbe039344 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
+++ b/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
@@ -15,7 +15,7 @@
 
 	<style>
 		body {
-			height: 600px;
+			height: 610px;
 		}
 	</style>
 </head>
diff --git a/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.tsx b/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.tsx
index 58bc614d9669..4cdc33edde29 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.tsx
+++ b/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.tsx
@@ -1,11 +1,12 @@
 import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
 import { type UI5CustomEvent } from "@ui5/webcomponents-base";
-import { useState, useRef, useCallback } from "react";
+import { useRef, useCallback } from "react";
 import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
 import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
 import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
 import UserMenuAccountClass from "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
 import UserMenuItemClass from "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
+import UserMenuItemGroupClass from "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
 import AvatarClass from "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents-icons/dist/action-settings.js";
 import "@ui5/webcomponents-icons/dist/globe.js";
@@ -19,16 +20,19 @@ const ShellBarBranding = createReactComponent(ShellBarBrandingClass);
 const UserMenu = createReactComponent(UserMenuClass);
 const UserMenuAccount = createReactComponent(UserMenuAccountClass);
 const UserMenuItem = createReactComponent(UserMenuItemClass);
+const UserMenuItemGroup = createReactComponent(UserMenuItemGroupClass);
 const Avatar = createReactComponent(AvatarClass);
 
 function App() {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const openerRef = useRef(null);
+  const userMenuRef = useRef<UserMenuClass | null>(null);
 
   const handleProfileClick = useCallback(
     (e: UI5CustomEvent<ShellBarClass, "profile-click">) => {
-      openerRef.current = e.detail.targetRef;
-      setMenuOpen(true);
+      const menu = userMenuRef.current;
+      if (menu) {
+        menu.opener = e.detail.targetRef;
+        menu.open = !menu.open;
+      }
     },
     [],
   );
@@ -86,7 +90,10 @@ function App() {
     console.log("Sign Out clicked");
     const result = prompt("Sign Out", "Are you sure you want to sign out?");
     if (result) {
-      setMenuOpen(false);
+      const menu = userMenuRef.current;
+      if (menu) {
+        menu.open = false;
+      }
     }
     e.preventDefault();
   }, []);
@@ -103,8 +110,7 @@ function App() {
         </Avatar>
       </ShellBar>
       <UserMenu
-        open={menuOpen}
-        opener={openerRef.current}
+        ref={userMenuRef}
         showManageAccount={true}
         showOtherAccounts={true}
         showEditAccounts={true}
@@ -115,7 +121,6 @@ function App() {
         onEditAccountsClick={handleEditAccountsClick}
         onChangeAccount={handleChangeAccount}
         onSignOutClick={handleSignOutClick}
-        onClose={() => setMenuOpen(false)}
       >
         <UserMenuAccount
           slot="accounts"
@@ -150,6 +155,12 @@ function App() {
         </UserMenuItem>
         <UserMenuItem icon="official-service" text="Legal Information" />
         <UserMenuItem icon="message-information" text="About" data-id="about" />
+        <UserMenuItem icon="globe" text="Language" data-id="single-select" showSelection={true}>
+          <UserMenuItemGroup checkMode="Single">
+            <UserMenuItem text="English" data-id="single-select-item1" checked={true} />
+            <UserMenuItem text="Deutsch" data-id="single-select-item2" />
+          </UserMenuItemGroup>
+        </UserMenuItem>
       </UserMenu>
     </>
   );
diff --git a/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js b/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js
index 5bfdd2f98d7c..4cc08a3ce226 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js
@@ -18,7 +18,7 @@ const menu = document.getElementById("userMenu");
 
 shellbar.addEventListener("ui5-profile-click", (event) => {
 	menu.opener = event.detail.targetRef;
-	menu.open = true;
+	menu.open = !menu.open;
 });
 
 menu.addEventListener("item-click", function (event) {
diff --git a/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html b/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html
index 7cfb1b877ae0..19990da21f7c 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html
+++ b/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html
@@ -15,7 +15,7 @@
 
 	<style>
 		body {
-			height: 600px;
+			height: 610px;
 		}
 	</style>
 </head>
@@ -31,7 +31,7 @@
 		<img src="../assets/images/avatars/man_avatar_3.png"/>
 	</ui5-avatar>
 </ui5-shellbar>
-<ui5-user-menu id="userMenu" opener="btnOpenUserMenu">
+<ui5-user-menu id="userMenu">
 	<ui5-user-menu-account slot="accounts"
 						   avatar-src="../assets/images/avatars/man_avatar_3.png"
 						   title-text="Alaina Chevalier"
diff --git a/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.tsx b/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.tsx
index 32987f8c029f..bc89116b4e8a 100644
--- a/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.tsx
+++ b/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.tsx
@@ -1,6 +1,6 @@
 import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
 import { type UI5CustomEvent } from "@ui5/webcomponents-base";
-import { useState, useRef, useCallback } from "react";
+import { useRef, useCallback } from "react";
 import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
 import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
 import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
@@ -22,13 +22,15 @@ const UserMenuItem = createReactComponent(UserMenuItemClass);
 const Avatar = createReactComponent(AvatarClass);
 
 function App() {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const openerRef = useRef(null);
+  const userMenuRef = useRef<UserMenuClass | null>(null);
 
   const handleProfileClick = useCallback(
     (e: UI5CustomEvent<ShellBarClass, "profile-click">) => {
-      openerRef.current = e.detail.targetRef;
-      setMenuOpen(true);
+      const menu = userMenuRef.current;
+      if (menu) {
+        menu.opener = e.detail.targetRef;
+        menu.open = !menu.open;
+      }
     },
     [],
   );
@@ -67,7 +69,10 @@ function App() {
     console.log("Sign Out clicked");
     const result = prompt("Sign Out", "Are you sure you want to sign out?");
     if (result) {
-      setMenuOpen(false);
+      const menu = userMenuRef.current;
+      if (menu) {
+        menu.open = false;
+      }
     }
     e.preventDefault();
   }, []);
@@ -84,12 +89,10 @@ function App() {
         </Avatar>
       </ShellBar>
       <UserMenu
-        open={menuOpen}
-        opener={openerRef.current}
+        ref={userMenuRef}
         onItemClick={handleItemClick}
         onAvatarClick={handleAvatarClick}
         onSignOutClick={handleSignOutClick}
-        onClose={() => setMenuOpen(false)}
       >
         <UserMenuAccount
           slot="accounts"
diff --git a/packages/website/src/components/Editor/ReactPlayground.tsx b/packages/website/src/components/Editor/ReactPlayground.tsx
index fdba04efcc97..e86e49519232 100644
--- a/packages/website/src/components/Editor/ReactPlayground.tsx
+++ b/packages/website/src/components/Editor/ReactPlayground.tsx
@@ -229,6 +229,7 @@ import SearchItemClass from "@ui5/webcomponents-fiori/dist/SearchItem.js";
 import SearchMessageAreaClass from "@ui5/webcomponents-fiori/dist/SearchMessageArea.js";
 import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
 import UserMenuItemClass from "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
+import UserMenuItemGroupClass from "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
 import UserMenuAccountClass from "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
 import BarcodeScannerDialogClass from "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";
 import NavigationLayoutClass from "@ui5/webcomponents-fiori/dist/NavigationLayout.js";
@@ -323,7 +324,7 @@ const ComponentClasses: Record<string, any> = {
   FlexibleColumnLayoutClass, MediaGalleryClass, MediaGalleryItemClass, ProductSwitchClass,
   ProductSwitchItemClass, ViewSettingsDialogClass, ViewSettingsDialogCustomTabClass, SortItemClass, FilterItemClass, FilterItemOptionClass,
   SearchClass, SearchItemClass, SearchMessageAreaClass, UserMenuClass, UserMenuItemClass,
-  UserMenuAccountClass, BarcodeScannerDialogClass, NavigationLayoutClass, SearchFieldClass,
+  UserMenuItemGroupClass, UserMenuAccountClass, BarcodeScannerDialogClass, NavigationLayoutClass, SearchFieldClass,
   SearchItemGroupClass, SearchItemShowMoreClass, SearchScopeClass, ShellBarBrandingClass,
   ShellBarSearchClass, ShellBarSpacerClass, UserSettingsDialogClass, UserSettingsItemClass,
   UserSettingsViewClass, UserSettingsAccountViewClass, UserSettingsAppearanceViewClass,