diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
index d86fcbd7854d..981cd4f0f3f9 100644
--- 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
index 544ef6c4d39f..d60652c05332 100644
--- 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
index 2687981b3638..f9ea0f559557 100644
--- 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
new file mode 100644
index 000000000000..655c5a9dba78
--- /dev/null
+++ b/packages/fiori/src/themes/base/NavigationLayout-parameters.css
@@ -0,0 +1,3 @@
+:root {
+ --_ui5_nl_side_navigation_box_shadow: none;
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
index 83b9f4a2f82e..e95f918dcfdb 100644
--- 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
index ac70f0dcfc7e..d53992315214 100644
--- 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
index aec455f666b5..c2f84102bd7b 100644
--- 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
index cf30632784fb..0564f5cef662 100644
--- 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
new file mode 100644
index 000000000000..62cf910ebad2
--- /dev/null
+++ b/packages/fiori/src/themes/sap_horizon/NavigationLayout-parameters.css
@@ -0,0 +1,3 @@
+:root {
+ --_ui5_nl_side_navigation_box_shadow: var(--sapContent_Shadow0);
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
index cbb3d8a485a3..c7846178eba4 100644
--- 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
new file mode 100644
index 000000000000..62cf910ebad2
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
index 325a3575819f..611570149fa2 100644
--- 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
new file mode 100644
index 000000000000..62cf910ebad2
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
index d519e36b9423..c592ba7ff4b9 100644
--- 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
new file mode 100644
index 000000000000..62cf910ebad2
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
index 686c8b49e47e..54294e114ee5 100644
--- 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
deleted file mode 100644
index 470ed9ee408e..000000000000
--- a/packages/fiori/src/types/SideNavigationDesign.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 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
index d1ffa600b1e1..c92bfb748ff6 100644
--- 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>
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/sample.html b/packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/sample.html
index 3b0a1da1c26a..acbf8aa3d329 100644
--- 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>