diff --git a/packages/fiori/src/themes/SideNavigationItemBase.css b/packages/fiori/src/themes/SideNavigationItemBase.css
index 8a8230c6f1ce..59b65384c2e7 100644
--- a/packages/fiori/src/themes/SideNavigationItemBase.css
+++ b/packages/fiori/src/themes/SideNavigationItemBase.css
@@ -15,8 +15,6 @@
box-sizing: border-box;
text-decoration: none;
position: relative;
-
- height: var(--_ui5_side_navigation_item_height);
min-height: var(--_ui5_side_navigation_item_height);
cursor: pointer;
color: inherit;
@@ -338,11 +336,25 @@ and there is an additional border that appears on hover. */
.ui5-sn-item-text {
flex: 1;
min-width: 0;
+}
+
+:host([side-nav-collapsed]) .ui5-sn-item-text,
+:host([design="Action"]) .ui5-sn-item-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
+:host([in-popover]) .ui5-sn-item-text {
+ overflow: visible;
+ text-overflow: unset;
+ white-space: nowrap;
+}
+
+:host(:not([side-nav-collapsed]):not([in-popover])) .ui5-sn-item-text {
+ margin: var(--_ui5_side_navigation_item_margin) 0;
+}
+
:host(:not([side-nav-collapsed])) .ui5-sn-item:not(.ui5-sn-item-group):not(.ui5-sn-item-with-expander) .ui5-sn-item-text {
padding-inline-end: 0.375rem;
}
diff --git a/packages/fiori/src/themes/SideNavigationPopover.css b/packages/fiori/src/themes/SideNavigationPopover.css
index ffd64852d3f2..37c741c3a8e7 100644
--- a/packages/fiori/src/themes/SideNavigationPopover.css
+++ b/packages/fiori/src/themes/SideNavigationPopover.css
@@ -4,6 +4,10 @@
padding: 0;
}
+.ui5-side-navigation-popover .ui5-side-navigation-in-popover {
+ width: max-content;
+}
+
.ui5-hidden-text {
position: absolute;
clip: rect(1px,1px,1px,1px);
diff --git a/packages/fiori/src/themes/base/SideNavigation-parameters.css b/packages/fiori/src/themes/base/SideNavigation-parameters.css
index 656e8dd0bb9b..7d892d877b24 100644
--- a/packages/fiori/src/themes/base/SideNavigation-parameters.css
+++ b/packages/fiori/src/themes/base/SideNavigation-parameters.css
@@ -24,6 +24,7 @@
--_ui5_side_navigation_item_border_style_color: none;
--_ui5_side_navigation_item_border_width: 0;
--_ui5_side_navigation_item_height: 2.75rem;
+ --_ui5_side_navigation_item_margin: 0.875rem;
--_ui5_side_navigation_item_expand_arrow_padding: 0.6875rem;
--_ui5_side_navigation_item_border_radius: 0;
--_ui5_side_navigation_item_bottom_margin: 0;
@@ -72,6 +73,7 @@
--_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
--_ui5_side_navigation_item_height: 2rem;
--_ui5_side_navigation_item_expand_arrow_padding: 0.3125rem;
+ --_ui5_side_navigation_item_margin: 0.5rem;
}
[dir="rtl"] {
diff --git a/packages/fiori/test/pages/SideNavigationWrapping.html b/packages/fiori/test/pages/SideNavigationWrapping.html
new file mode 100644
index 000000000000..b593c5b65725
--- /dev/null
+++ b/packages/fiori/test/pages/SideNavigationWrapping.html
@@ -0,0 +1,110 @@
+
+
+
+
+ Side Navigation with Long Wrapping Texts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Change width
+
+
+
+
+
+
diff --git a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx
index 2294aec5dc40..a251b2e0b685 100644
--- a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx
+++ b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx
@@ -29,6 +29,6 @@ SideNavigation is enabled to be used inside a responsive popover. This example s
### Defining Custom Width
-The horizontal size of the side navigation panel can be customized through CSS. The panel must be at least 16 rem wide to maintain readability and layout stability. You can set a larger width as needed, but it cannot be reduced below 16 rem.
+The width of the side navigation panel can be customized using CSS. The panel must be at least 16 rem wide to maintain readability and layout stability. You can set a larger width as needed, but it cannot be reduced below 16 rem. If the panel does not have sufficient space, long texts will wrap automatically.
diff --git a/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.js b/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.js
index db8ab2440b6d..95b2264e28ff 100644
--- a/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.js
+++ b/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.js
@@ -4,9 +4,10 @@ import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
import "@ui5/webcomponents-fiori/dist/SideNavigation.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";
\ No newline at end of file
+import "@ui5/webcomponents-icons/dist/bbyd-dashboard.js";
+import "@ui5/webcomponents-icons/dist/bar-chart.js";
+import "@ui5/webcomponents-icons/dist/wrench.js";
+import "@ui5/webcomponents-icons/dist/address-book.js";
+import "@ui5/webcomponents-icons/dist/area-chart.js";
+import "@ui5/webcomponents-icons/dist/message-information.js";
+import "@ui5/webcomponents-icons/dist/history.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/sample.html b/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/sample.html
index 9077a3612680..35bd96eb7a7d 100644
--- a/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/sample.html
+++ b/packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/sample.html
@@ -14,13 +14,19 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+