SAP · dobrinyonkov · Jun 2, 2025 · May 27, 2025
diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx
@@ -1,5 +1,9 @@
 import Basic from "../../../_samples/fiori/ShellBar/Basic/Basic.md";
 import Advanced from "../../../_samples/fiori/ShellBar/Advanced/Advanced.md";
+import EmbeddedBackNavigation from "../../../_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md";
+import MultipleNonProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md";
+import MultipleProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md";
+import TrialExample from "../../../_samples/fiori/ShellBar/TrialExample/TrialExample.md";
 
 <%COMPONENT_OVERVIEW%>
 
@@ -12,7 +16,27 @@ The ShellBar includes Back button, Logo, Title and Profile image.
 
 ## More Samples
 
-### Profile Area
-Press the profile image on the right-most side to open a simple popup that one can implment its own profile area.
+### All Features
+A comprehensive ShellBar demonstrating all available features including notifications, search, content items, and profile.
 
-<Advanced />
+<Advanced />
+
+### Embedded Back Navigation
+ShellBar with embedded back navigation button in the start area.
+
+<EmbeddedBackNavigation />
+
+### Trial Example
+ShellBar configured for trial environments with trial tags and remaining days indicator.
+
+<TrialExample />
+
+### Multiple Productive Instances
+ShellBar setup for multiple productive system instances with region indicators.
+
+<MultipleProductiveInstances />
+
+### Multiple Non-Productive Instances
+ShellBar setup for multiple non-productive system instances with system and region tags.
+
+<MultipleNonProductiveInstances />
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md b/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md
@@ -1,4 +1,4 @@
 import html from '!!raw-loader!./sample.html';
 import js from '!!raw-loader!./main.js';
 
-<Editor html={html} js={js} />
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js
@@ -1,72 +1,16 @@
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents/dist/Input.js";
-import "@ui5/webcomponents/dist/Title.js";
-import "@ui5/webcomponents/dist/ToggleButton.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/dist/Text.js";
+import "@ui5/webcomponents/dist/Tag.js";
+import "@ui5/webcomponents/dist/Switch.js";
+import "@ui5/webcomponents/dist/Label.js";
 
 import "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js";
 import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
-import "@ui5/webcomponents-fiori/dist/SearchItem.js";
-import "@ui5/webcomponents-fiori/dist/SearchScope.js";
 
-import "@ui5/webcomponents-icons/dist/da.js";
-import "@ui5/webcomponents-icons/dist/da-2.js";
+import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/nav-back.js";
-import "@ui5/webcomponents-icons/dist/action-settings.js";
-import "@ui5/webcomponents-icons/dist/official-service.js";
-
-const shellbar = document.getElementById("shellbar");
-const menu = document.getElementById("userMenu");
-
-shellbar.addEventListener("ui5-profile-click", (event) => {
-	menu.opener = event.detail.targetRef;
-	menu.open = true;
-});
-
-[...document.querySelectorAll("ui5-toggle-button")].forEach(el => {
-	el.addEventListener("click", event => {
-		const toggleButton = event.target;
-		toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
-	});
-});
-
-const scopeData = [
-    { name: "Laptop", scope: "products" },
-    { name: "Leave Requests", scope: "apps" },
-    { name: "Log work", scope: "apps" },
-    { name: "Manage Products", scope: "apps" },
-    { name: "Mobile Phones", scope: "products" },
-    { name: "Tablet", scope: "products" },
-];
-
-function createScopeItems(scope) {
-    let filterData = [];
-
-    if (!scope) {
-        filterData = scopeData;
-    } else {
-        filterData = scopeData.filter(item => item.scope === scope);
-    }
-
-    filterData.forEach(item => {
-        const searchItem = document.createElement("ui5-search-item");
-        searchItem.text = item.name;
-        searchItem.scopeName = item.scope;
-        searchScope.appendChild(searchItem);
-    });
-}
-
-const searchScope = document.getElementById("search-scope");
-
-createScopeItems();
-
-searchScope.addEventListener("ui5-scope-change", (event) => {
-    const scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase();
-
-    searchScope.innerHTML = "";
-
-    createScopeItems(scope);
-});
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+import "@ui5/webcomponents-icons/dist/customer.js";
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html
@@ -6,43 +6,36 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sample</title>
-    <link rel="stylesheet" href="./main.css">
 </head>
 
-<body style="background-color: var(--sapBackgroundColor);height: 500px;">
+<body style="background-color: var(--sapBackgroundColor);height: 200px;">
     <!-- playground-fold-end -->
 
-    <ui5-shellbar id="shellbar" primary-title="Corporate Portal" notifications-count="99+" show-notifications>
-        <ui5-avatar slot="profile">
-            <img src="../assets/images/avatars/woman_avatar_5.png" />
-        </ui5-avatar>
-		<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
-        <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
-        <ui5-button icon="nav-back" slot="startButton"></ui5-button>
-        <ui5-shellbar-search slot="searchField" id="search-scope" show-clear-icon placeholder="Search Apps, Products">
-			<ui5-search-scope text="All" selected slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
-		</ui5-shellbar-search>
-    </ui5-shellbar>
-    <ui5-user-menu id="userMenu" opener="btnOpenUserMenu">
-        <ui5-user-menu-account slot="accounts"
-                               avatar-src="../assets/images/avatars/man_avatar_3.png"
-                               title-text="Alaina Chevalier"
-                               subtitle-text="[email protected]"
-                               description="Delivery Manager"
-                               selected>
-        </ui5-user-menu-account>
-        <ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
-        <ui5-user-menu-item icon="official-service" text="Legal Information">
-            <ui5-user-menu-item text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
-            <ui5-user-menu-item text="Privacy 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>
+        <ui5-shellbar primary-title="Product Identifier" notifications-count="72" show-notifications show-product-switch>
+            <ui5-button icon="menu2" slot="startButton"></ui5-button>
+            <ui5-button icon="nav-back" slot="startButton"></ui5-button>
+
+            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+
+            <ui5-tag design="Set2" color-scheme="7" slot="content">Trial</ui5-tag>
+            <ui5-text slot="content">30 days remaining</ui5-text>
+            <ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
+            <div slot="content" style="display: flex; gap: 0 5px; align-items: center;">
+                <ui5-switch></ui5-switch>
+                <ui5-label>Try Beta Version</ui5-label>
+            </div>
+
+            <ui5-shellbar-search slot="searchField" show-clear-icon placeholder="Search Apps, Products"></ui5-shellbar-search>
+
+            <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+            <ui5-avatar slot="profile">
+                <img src="../assets/images/avatars/man_avatar_3.png"/>
+            </ui5-avatar>
+        </ui5-shellbar>
+
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>
 </body>
 
 </html>
-<!-- playground-fold-end -->
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js b/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js
@@ -1,22 +1,10 @@
-
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents/dist/Label.js";
-import "@ui5/webcomponents/dist/Switch.js";
-import "@ui5/webcomponents/dist/ToggleButton.js";
-import "@ui5/webcomponents/dist/Input.js";
-import "@ui5/webcomponents/dist/ListItemStandard.js";
-import "@ui5/webcomponents/dist/Popover.js";
-import "@ui5/webcomponents/dist/Title.js";
-import "@ui5/webcomponents/dist/ToggleButton.js";
-import "@ui5/webcomponents/dist/List.js";
-import "@ui5/webcomponents/dist/Text.js";
-import "@ui5/webcomponents/dist/Tag.js";
 
 import "@ui5/webcomponents-fiori/dist/ShellBar.js";
-import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
 import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
 
-import "@ui5/webcomponents-icons/dist/customer.js";
-import "@ui5/webcomponents-icons/dist/nav-back.js";
-import "@ui5/webcomponents-icons/dist/edit.js";
+import "@ui5/webcomponents-icons/dist/menu2.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+import "@ui5/webcomponents-icons/dist/customer.js";
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html
@@ -11,29 +11,21 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-        <ui5-shellbar primary-title="Product name">
-            <ui5-button icon="nav-back" slot="startButton"></ui5-button>
+        <ui5-shellbar primary-title="Product Identifier" notifications-count="72" show-notifications>
+            <ui5-button icon="menu2" slot="startButton"></ui5-button>
             <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
 
-            <ui5-tag color-scheme="7" slot="content" design="Information">Trial</ui5-tag>
-            <ui5-text slot="content">EMEA</ui5-text>
-
-            <ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>
-
-            <ui5-button slot="content">Edit</ui5-button>
-            <div slot="content" style="display: flex; align-items: center;">
-                <ui5-label>New Version</ui5-label>
-                <ui5-switch checked></ui5-switch>
-            </div>
-
             <ui5-shellbar-search slot="searchField" show-clear-icon placeholder="Search Apps, Products"></ui5-shellbar-search>
 
-            <ui5-shellbar-item icon="feedback" text="Button5"></ui5-shellbar-item>
-            <ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+            <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+            <ui5-avatar slot="profile">
+                <img src="../assets/images/avatars/man_avatar_3.png"/>
+            </ui5-avatar>
         </ui5-shellbar>
+
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>
 </body>
 
 </html>
-<!-- playground-fold-end -->
+<!-- playground-fold-end -->
diff --git a/...e/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md b/...e/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/main.js b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/main.js
@@ -0,0 +1,12 @@
+import "@ui5/webcomponents/dist/Avatar.js";
+import "@ui5/webcomponents/dist/Button.js";
+
+import "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
+
+import "@ui5/webcomponents-icons/dist/nav-back.js";
+import "@ui5/webcomponents-icons/dist/search.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+import "@ui5/webcomponents-icons/dist/bell.js";
+import "@ui5/webcomponents-icons/dist/customer.js";
diff --git a/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/sample.html b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/sample.html
@@ -0,0 +1,31 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+        <ui5-shellbar primary-title="Product Identifier" notifications-count="72" show-notifications>
+            <ui5-button icon="nav-back" slot="startButton"></ui5-button>
+            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+
+            <ui5-shellbar-search slot="searchField" show-clear-icon placeholder="Search Apps, Products"></ui5-shellbar-search>
+
+            <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+            <ui5-avatar slot="profile">
+                <img src="../assets/images/avatars/man_avatar_3.png"/>
+            </ui5-avatar>
+        </ui5-shellbar>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/...fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md b/...fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/main.js b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/main.js
@@ -0,0 +1,12 @@
+import "@ui5/webcomponents/dist/Avatar.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Text.js";
+import "@ui5/webcomponents/dist/Tag.js";
+
+import "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
+
+import "@ui5/webcomponents-icons/dist/menu2.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+import "@ui5/webcomponents-icons/dist/customer.js";
diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html
@@ -0,0 +1,49 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+        <ui5-shellbar primary-title="Product Identifier" style="margin-bottom: 1rem;" notifications-count="72" show-notifications>
+            <ui5-button icon="menu2" slot="startButton"></ui5-button>
+            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+
+            <ui5-tag design="Set2" color-scheme="8" slot="content">Q System</ui5-tag>
+            <ui5-text slot="content">Region EMEA</ui5-text>
+
+            <ui5-shellbar-search slot="searchField" show-clear-icon placeholder="Search Apps, Products"></ui5-shellbar-search>
+
+            <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+            <ui5-avatar slot="profile">
+                <img src="../assets/images/avatars/man_avatar_3.png"/>
+            </ui5-avatar>
+        </ui5-shellbar>
+
+        <ui5-shellbar primary-title="Product Identifier" notifications-count="72" show-notifications>
+            <ui5-button icon="menu2" slot="startButton"></ui5-button>
+            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+
+            <ui5-tag design="Set2" color-scheme="8" slot="content">Q System</ui5-tag>
+            <ui5-text slot="content">Region APJ</ui5-text>
+
+            <ui5-shellbar-search slot="searchField" show-clear-icon placeholder="Search Apps, Products"></ui5-shellbar-search>
+
+            <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+            <ui5-avatar slot="profile">
+                <img src="../assets/images/avatars/man_avatar_3.png"/>
+            </ui5-avatar>
+        </ui5-shellbar>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/...mples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md b/...mples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />