SAP · TeodorTaushanov · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
@@ -31,7 +31,6 @@ 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 {
@@ -142,16 +141,6 @@ 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 accessible ARIA name of the component.
 	 * @default undefined

diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
@@ -17,7 +17,6 @@
 }
 
 .ui5-nl-header {
-	box-shadow: var(--sapShell_Shadow);
 	z-index: 2;
 }
 
@@ -41,6 +40,10 @@
 	width: 100%;
 }
 
+:host(:not([is-phone])) ::slotted([ui5-side-navigation][slot="sideContent"]) {
+	box-shadow: var(--_ui5_nl_side_navigation_box_shadow);
+}
+
 :host([is-phone]) ::slotted([ui5-side-navigation][slot="sideContent"]) {
 	width: 100%;
 	box-shadow: none;

diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
@@ -7,7 +7,6 @@
 	width: var(--_ui5_side_navigation_width);
 	max-width: 100%;
 	transition: width 0.3s, min-width 0.3s;
-	box-shadow: var(--_ui5_side_navigation_box_shadow);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	background: var(--sapList_Background);
@@ -18,12 +17,7 @@
 	width: var(--_ui5_side_navigation_collapsed_width);
 }
 
-/* SideNavigationDesign */
-:host([design="Plain"]) {
-	box-shadow: none;
-}
-
-:host([design="Plain"][is-phone]) {
+:host([is-phone]) {
 	width: 100%;
 }
 

diff --git a/packages/fiori/src/themes/base/NavigationLayout-parameters.css b/packages/fiori/src/themes/base/NavigationLayout-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_nl_side_navigation_box_shadow: none;
+}
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -7,6 +7,7 @@
 @import "../base/ProductSwitchItem-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -7,6 +7,7 @@
 @import "../base/ProductSwitchItem-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "../base/TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -7,6 +7,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -7,6 +7,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "../base/ShellBar-parameters.css";
 @import "../base/SideNavigation-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon/NavigationLayout-parameters.css b/packages/fiori/src/themes/sap_horizon/NavigationLayout-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_nl_side_navigation_box_shadow: var(--sapContent_Shadow0);
+}
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -10,6 +10,7 @@
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
+@import "./NavigationLayout-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "./Wizard-parameters.css";
 @import "./WizardTab-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_dark/NavigationLayout-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/NavigationLayout-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_nl_side_navigation_box_shadow: var(--sapContent_Shadow0);
+}
diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -11,6 +11,7 @@
 @import "../base/SearchField-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
+@import "./NavigationLayout-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "./Wizard-parameters.css";
 @import "./WizardTab-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_hcb/NavigationLayout-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/NavigationLayout-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_nl_side_navigation_box_shadow: var(--sapContent_Shadow0);
+}
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -8,6 +8,7 @@
 @import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "./SideNavigation-parameters.css";
+@import "./NavigationLayout-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

diff --git a/packages/fiori/src/themes/sap_horizon_hcw/NavigationLayout-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/NavigationLayout-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_nl_side_navigation_box_shadow: var(--sapContent_Shadow0);
+}
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -7,6 +7,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "../sap_horizon_hcb/ShellBar-parameters.css";
 @import "./SideNavigation-parameters.css";
+@import "./NavigationLayout-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";

diff --git a/packages/fiori/src/types/SideNavigationDesign.ts b/packages/fiori/src/types/SideNavigationDesign.ts
diff --git a/packages/fiori/test/pages/SideNavigationOverlay.html b/packages/fiori/test/pages/SideNavigationOverlay.html
@@ -26,56 +26,56 @@
 			<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-side-navigation id="nl1">
+				<!-- 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>
 
@@ -87,7 +87,7 @@
 		nl1.addEventListener("selection-change", function (event) {
 			respPopover.open=false;
 		});
-	
+
 	</script>
 </body>
 </html>
diff --git a/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/sample.html b/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/sample.html
@@ -20,7 +20,7 @@
 			<ui5-button icon="menu2" slot="startButton" id="menuBtn"></ui5-button>
 		</ui5-shellbar>
 		<ui5-responsive-popover id="respPopover" opener="menuBtn" placement="Bottom" accessible-name="Main Navigation">
-			<ui5-side-navigation id="sideNavigation" design="Plain">
+			<ui5-side-navigation id="sideNavigation">
 				<!-- Items -->
 				<ui5-side-navigation-item text="Home" href="#contHome" icon="home" selected></ui5-side-navigation-item>
 				<ui5-side-navigation-group text="Group 1" expanded>