SAP · s-todorova · Mar 18, 2025 · Jan 29, 2025 · Jan 29, 2025 · Feb 19, 2025
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
@@ -31,6 +31,7 @@ import { isInstanceOfSideNavigationItem } from "./SideNavigationItem.js";
 import type SideNavigationItem from "./SideNavigationItem.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 import type SideNavigationGroup from "./SideNavigationGroup.js";
+import type SideNavigationDesign from "./types/SideNavigationDesign.js";
 import SideNavigationTemplate from "./SideNavigationTemplate.js";
 
 import {
@@ -141,6 +142,16 @@ class SideNavigation extends UI5Element {
 	@property({ type: Boolean })
 	collapsed = false;
 
+	/**
+	 * Defines whether the control should have container styling or not.
+	 * **Note** In order to achieve the best user experience, it is recommended to use "Plain" value if SideNavigation is placed inside a responsive popover.
+	 *
+	 * @public
+	 * @default "Decorated"
+	 */
+	@property()
+	design: `${SideNavigationDesign}` = "Decorated";
+
 	/**
 	 * Defines the main items of the component.
 	 *
@@ -182,6 +193,13 @@ class SideNavigation extends UI5Element {
 	@property({ type: Object })
 	_menuPopoverItems: Array<SideNavigationItem> = [];
 
+	/**
+	 * Defines if the component is rendered on a mobile device.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	isPhone = isPhone();
+
 	_isOverflow = false;
 	_flexibleItemNavigation: ItemNavigation;
 	_fixedItemNavigation: ItemNavigation;

diff --git a/packages/fiori/src/SideNavigationGroup.ts b/packages/fiori/src/SideNavigationGroup.ts
@@ -5,6 +5,8 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import {
 	isLeft,
 	isRight,
+	isMinus,
+	isPlus,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -131,12 +133,12 @@ class SideNavigationGroup extends SideNavigationItemBase {
 	}
 
 	_onkeydown(e: KeyboardEvent) {
-		if (isLeft(e)) {
+		if (isLeft(e) || isMinus(e)) {
 			this.expanded = false;
 			return;
 		}
 
-		if (isRight(e)) {
+		if (isRight(e) || isPlus(e)) {
 			this.expanded = true;
 		}
 	}

diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts
@@ -7,6 +7,8 @@ import {
 	isRight,
 	isSpace,
 	isEnter,
+	isMinus,
+	isPlus,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type SideNavigationItemBase from "./SideNavigationItemBase.js";
 import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
@@ -183,12 +185,12 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	_onkeydown(e: KeyboardEvent) {
-		if (isLeft(e)) {
+		if (isLeft(e) || isMinus(e)) {
 			this.expanded = false;
 			return;
 		}
 
-		if (isRight(e)) {
+		if (isRight(e) || isPlus(e)) {
 			this.expanded = true;
 			return;
 		}

diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
@@ -18,6 +18,15 @@
 	width: var(--_ui5_side_navigation_collapsed_width);
 }
 
+/* SideNavigationDesign */
+:host([design="Plain"]) {
+	box-shadow: none;
+}
+
+:host([design="Plain"][is-phone]) {
+	width: 100%;
+}
+
 .ui5-sn-root {
 	height: 100%;
 	display: flex;

diff --git a/packages/fiori/src/types/SideNavigationDesign.ts b/packages/fiori/src/types/SideNavigationDesign.ts
@@ -0,0 +1,20 @@
+/**
+ * Available options for the SideNavigation design.
+ * @public
+ */
+enum SideNavigationDesign {
+
+	/**
+	 * SideNavigation has a standalone design.
+	 * @public
+	 */
+	Decorated = "Decorated",
+
+	/**
+	 * SideNavigation is without standalone design.
+	 * @public
+ 	 */
+	Plain = "Plain",
+}
+
+export default SideNavigationDesign;
diff --git a/packages/fiori/test/pages/SideNavigationOverlay.html b/packages/fiori/test/pages/SideNavigationOverlay.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>SideNavigation Overlay</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<style>
+
+		#respPopover::part(content) {
+			padding: 0;
+			overflow-x: visible;
+			overflow-y: hidden
+		}
+	</style>
+</head>
+
+<body>
+	<div>
+		<ui5-shellbar
+			class="header"
+			slot="header"
+			primary-title="UI5 Web Components"
+			secondary-title="The Best Run SAP"
+		>
+			<ui5-button icon="menu" id="menuBtn" slot="startButton"></ui5-button>
+		</ui5-shellbar>
+		<ui5-responsive-popover id="respPopover" opener="menuBtn" placement="Bottom" accessible-name="Main Navigation">
+				<ui5-side-navigation id="nl1" design="Plain">
+					<!-- Items -->
+					<ui5-side-navigation-item text="Home" href="#home" icon="home"></ui5-side-navigation-item>
+					<ui5-side-navigation-group text="Group 1" expanded>
+						<ui5-side-navigation-item text="Item 1" text="Item 1" expanded href="#item1" icon="locate-me">
+							<ui5-side-navigation-sub-item text="Sub Item 1" href="#subitem1" unselectable></ui5-side-navigation-sub-item>
+							<ui5-side-navigation-sub-item text="Sub Item 2" href="#subitem2"></ui5-side-navigation-sub-item>
+						</ui5-side-navigation-item>
+						<ui5-side-navigation-item text="Item 2" href="#item2" icon="calendar" unselectable expanded>
+							<ui5-side-navigation-sub-item text="Sub Item 3" href="#subitem3"></ui5-side-navigation-sub-item>
+							<ui5-side-navigation-sub-item text="Sub Item 4" href="#subitem4"></ui5-side-navigation-sub-item>
+						</ui5-side-navigation-item>
+						<ui5-side-navigation-item text="Item 3" href="#item3" icon="activity-assigned-to-goal" unselectable></ui5-side-navigation-item>
+					</ui5-side-navigation-group>
+					<ui5-side-navigation-item text="Home2" href="#home2" icon="home"></ui5-side-navigation-item>
+					<ui5-side-navigation-group text="Group 2" expanded>
+						<ui5-side-navigation-item text="Item 4" href="#item4" icon="history" expanded>
+							<ui5-side-navigation-sub-item text="Sub Item 5" href="#subitem5"></ui5-side-navigation-sub-item>
+							<ui5-side-navigation-sub-item text="Sub Item 6" href="#subitem6"></ui5-side-navigation-sub-item>
+						</ui5-side-navigation-item>
+						<ui5-side-navigation-item text="Item 5" href="#item5" icon="source-code" expanded>
+							<ui5-side-navigation-sub-item text="Sub Item 7" href="#subitem7"></ui5-side-navigation-sub-item>
+							<ui5-side-navigation-sub-item text="Sub Item 8" href="#subitem8"></ui5-side-navigation-sub-item>
+						</ui5-side-navigation-item>
+						<ui5-side-navigation-item text="Item 6" href="#item6" icon="background" expanded>
+							<ui5-side-navigation-sub-item text="Sub Item 9" href="#subitem9"></ui5-side-navigation-sub-item>
+							<ui5-side-navigation-sub-item text="Sub Item 10" href="#subitem10"></ui5-side-navigation-sub-item>
+						</ui5-side-navigation-item>
+						<ui5-side-navigation-item text="Item 7" href="#item7" icon="background" expanded>
+							<ui5-side-navigation-sub-item text="Sub Item 11" href="#subitem11"></ui5-side-navigation-sub-item>
+							<ui5-side-navigation-sub-item text="Sub Item 12" href="#subitem12"></ui5-side-navigation-sub-item>
+						</ui5-side-navigation-item>
+					</ui5-side-navigation-group>
+					<!-- Fixed Items -->
+					<ui5-side-navigation-item slot="fixedItems"
+											text="Legal"
+											href="https://www.sap.com/about/legal/impressum.html"
+											target="_blank"
+											icon="compare"></ui5-side-navigation-item>
+					<ui5-side-navigation-item slot="fixedItems"
+											text="Privacy"
+											href="https://www.sap.com/about/legal/privacy.html"
+											target="_blank"
+											icon="locked"></ui5-side-navigation-item>
+					<ui5-side-navigation-item slot="fixedItems"
+											text="Terms of Use"
+											href="https://www.sap.com/terms-of-use"
+											target="_blank"
+											icon="document-text"></ui5-side-navigation-item>
+				</ui5-side-navigation>
+		</ui5-responsive-popover>
+	</div>
+
+	<script>
+		menuBtn.addEventListener("click", function (event) {
+			respPopover.open = !respPopover.open;
+		});
+
+		nl1.addEventListener("selection-change", function (event) {
+			respPopover.open=false;
+		});
+
+	</script>
+</body>
+</html>
diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
@@ -550,11 +550,7 @@ abstract class Popup extends UI5Element {
 	 * @protected
 	 */
 	resetFocus() {
-		if (!this._focusedElementBeforeOpen) {
-			return;
-		}
-
-		this._focusedElementBeforeOpen.focus();
+		this._focusedElementBeforeOpen?.focus();
 		this._focusedElementBeforeOpen = null;
 	}
 

diff --git a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx
@@ -1,6 +1,7 @@
 import Basic from "../../../_samples/fiori/SideNavigation/Basic/Basic.md";
 import QuickAction from "../../../_samples/fiori/SideNavigation/QuickAction/QuickAction.md";
 import UnselectableParentItems from "../../../_samples/fiori/SideNavigation/UnselectableParentItems/UnselectableParentItems.md";
+import OverlayMode from "../../../_samples/fiori/SideNavigation/OverlayMode/OverlayMode.md";
 
 <%COMPONENT_OVERVIEW%>
 
@@ -20,3 +21,8 @@ When a parent item is selected, it will expand or collapse the list of child ite
 Quick action items allow for providing access to frequent functionality.
 
 <QuickAction />
+
+### Overlay mode
+SideNavigation is enabled to be used inside a responsive popover. This example shows how to achieve overlay mode with correct design and interaction.
+
+<OverlayMode />
diff --git a/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/OverlayMode.md b/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/OverlayMode.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import css from '!!raw-loader!./main.css';
+
+<Editor html={html} js={js} css={css} />
diff --git a/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/main.css b/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/main.css
@@ -0,0 +1,17 @@
+#respPopover::part(content) {
+	padding: 0;
+	overflow-x: visible;
+	overflow-y: hidden
+}
+
+.content {
+	padding: 2rem;
+}
+
+.contentItem {
+	display: none;
+}
+
+.contentItemVisible {
+	display: block;
+}
diff --git a/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/main.js b/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/main.js
@@ -0,0 +1,45 @@
+/* playground-hide */
+import "./playground-support.js";
+/* playground-hide-end */
+import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
+import "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import "@ui5/webcomponents/dist/ResponsivePopover.js"
+import "@ui5/webcomponents-fiori/dist/Page.js"
+import "@ui5/webcomponents/dist/Text.js";
+import "@ui5/webcomponents/dist/Title.js";
+
+import "@ui5/webcomponents-icons/dist/home.js";
+import "@ui5/webcomponents-icons/dist/chain-link.js";
+import "@ui5/webcomponents-icons/dist/group.js";
+import "@ui5/webcomponents-icons/dist/locate-me.js";
+import "@ui5/webcomponents-icons/dist/calendar.js";
+import "@ui5/webcomponents-icons/dist/history.js";
+import "@ui5/webcomponents-icons/dist/customer.js"; 
+import "@ui5/webcomponents-icons/dist/menu.js";
+import "@ui5/webcomponents-icons/dist/write-new.js";
+import "@ui5/webcomponents-icons/dist/widgets.js";
+import "@ui5/webcomponents-icons/dist/compare.js";
+
+menuBtn.addEventListener("click", function () {
+	respPopover.open = !respPopover.open;
+});
+
+//By design on clicking on an element the popover should close
+sideNavigation.addEventListener("selection-change", function (event) {
+	if (event.detail.item.getAttribute("target")) {
+		respPopover.open=false;
+		return;
+	}
+
+	const contentItems = document.querySelectorAll(".contentItem");
+	contentItems.forEach(item => {
+		item.classList.remove("contentItemVisible");
+	});
+	document.getElementById(event.detail.item.getAttribute("href").replace("#", ""))?.classList.add("contentItemVisible");
+
+	respPopover.open=false;
+});