Skip to content

refactor(ui5-side-navigation): allow long item texts to wrap instead of truncating #12577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 4, 2025
Merged

refactor(ui5-side-navigation): allow long item texts to wrap instead of truncating #12577

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
35da965
refactor(ui5-side-navigation): item texts wrap instead of truncating
s-todorova Oct 29, 2025
a097950
fix: public sample text
s-todorova Oct 30, 2025
731aa64
Merge branch 'main' into sidenav_text_wrapping
s-todorova Oct 30, 2025
3e31ba3
Merge branch 'main' into sidenav_text_wrapping
s-todorova Oct 30, 2025
ae2c7d4
Merge branch 'main' into sidenav_text_wrapping
s-todorova Oct 31, 2025
2a71a79
Merge branch 'main' into sidenav_text_wrapping
s-todorova Nov 3, 2025
7657329
Merge branch 'main' into sidenav_text_wrapping
s-todorova Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions packages/fiori/src/themes/SideNavigationItemBase.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/fiori/src/themes/SideNavigationPopover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 2 additions & 0 deletions packages/fiori/src/themes/base/SideNavigation-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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"] {
Expand Down
110 changes: 110 additions & 0 deletions packages/fiori/test/pages/SideNavigationWrapping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Side Navigation with Long Wrapping Texts</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>
</head>

<body style="background-color: var(--sapBackgroundColor)">
<ui5-side-navigation style="height: 90vh; " id="sn1">
<ui5-side-navigation-item text="Home"
icon="home"
href="#home"
tooltip="Home tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-group id="group1" expanded text="Group with very long text that should wrap" tooltip="Group tooltip">
<!-- Items -->
<ui5-side-navigation-item text="Home 1 lorem ipsum dolor sit amet, consectetur adipiscing elit"
icon="home"
href="#home"
tooltip="Home 1 tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-item text="People" href="#people" icon="group" tooltip="People tooltip">
<ui5-side-navigation-sub-item text="From Other Teams lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="employee-rejections"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-item text="People unselectable lorem ipsum dolor sit amet, consectetur adipiscing elit" href="#people" expanded unselectable icon="group" tooltip="People unselectable tooltip">
<ui5-side-navigation-sub-item href="#disabled" text="Disabled" title="Disabled item tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="From Other Teams 2 lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-item text="Service Management and Customer Support Operations" href="#people" expanded unselectable icon="group" tooltip="People unselectable tooltip">
<ui5-side-navigation-sub-item href="#disabled" text="Disabled" title="Service Tickets and Customer Issue Resolution"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="From Other Teams 2 lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
</ui5-side-navigation-group>
<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" ></ui5-side-navigation-item>
<ui5-side-navigation-item href="#events" expanded text="Events lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="calendar">
<ui5-side-navigation-sub-item href="#page1" target="_self" text="Local lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="Others" selected></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-item href="#locations" text="Locations 2 lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="locate-me"></ui5-side-navigation-item>
<ui5-side-navigation-group expanded text="Group 2 lorem ipsum dolor sit amet, consectetur adipiscing elit">
<!-- Items -->
<ui5-side-navigation-item text="Home 1 lorem ipsum dolor sit amet, consectetur adipiscing elit"
icon="home"
href="#home"
title="Home tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-item text="People 2 lorem ipsum dolor sit amet, consectetur adipiscing elit" href="#people" expanded icon="group">
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="From Other Teams 3 lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="employee-rejections"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
</ui5-side-navigation-group>
<ui5-side-navigation-group expanded text="Group 2 1">
<!-- Items -->
<ui5-side-navigation-item text="Home 1"
icon="home"
href="#home"
title="Home tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-item text="People" href="#people" expanded icon="group">
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="From Other Teams 4" icon="employee-rejections"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
</ui5-side-navigation-group>
<ui5-side-navigation-item href="#page1" target="_self" text="Locations 25" icon="group">
<ui5-side-navigation-sub-item icon="home" href="#page1" target="_self" text="Local lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item icon="female" text="Others lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-group expanded text="Group 3">
<ui5-side-navigation-item text="Home 10" icon="home" href="#home" tooltip="Home 10 tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-item text="People" href="#people" expanded icon="group" tooltip="People tooltip">
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" tooltip="Disabled item tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="From Other Teams 5" icon="employee-rejections" tooltip="From Other Teams 5 tooltip"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
</ui5-side-navigation-group>
<!-- Fixed Items -->
<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate" tooltip="Quick Create Tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-item slot="fixedItems" text="Quick Create lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="write-new" design="Action" unselectable id="quickCreate2" tooltip="Quick Create Tooltip"></ui5-side-navigation-item>
<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link" title="Useful links tooltip">
<ui5-side-navigation-sub-item text="Vacation Tool" title="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="HR tool"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
<ui5-side-navigation-item slot="fixedItems" text="History lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="history"></ui5-side-navigation-item>
</ui5-side-navigation>

<div style="float: right">
<ui5-checkbox id="collapsed" text="Collapsed"></ui5-checkbox>
<ui5-checkbox id="density" text="Compact density"></ui5-checkbox>
<br>
<ui5-label for="slider" show-colon>Change width</ui5-label>
<ui5-slider id="slider" value="0" min="0" max="600" step="50" show-tickmarks label-interval="2"></ui5-slider>
</div>

<script>
const sn = document.getElementById("sn1");

const collapsedBtn = document.getElementById("collapsed");

collapsedBtn.addEventListener("change", e => {
sn.toggleAttribute("collapsed", e.target.checked);
});

const densityBtn = document.getElementById("density");
density.addEventListener("change", e => {
document.body.classList.toggle("ui5-content-density-compact", e.target.checked);
});

slider.addEventListener("ui5-input", function (event) {
sn1.style.width = event.target.value + 'px';
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@ SideNavigation is enabled to be used inside a responsive popover. This example s
<OverlayMode />

### 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 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. Long texts will wrap if not enough space is available.

<CustomWidth />
13 changes: 7 additions & 6 deletions packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
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";
16 changes: 11 additions & 5 deletions packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,19 @@

<ui5-side-navigation>
<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
<ui5-side-navigation-group text="Group" expanded>
<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
<ui5-side-navigation-item text="Events" icon="calendar">
<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
<ui5-side-navigation-item text="Resource Planning and Business Management Solutions" icon="bbyd-dashboard"></ui5-side-navigation-item>
<ui5-side-navigation-group text="System & Administration Management" expanded>
<ui5-side-navigation-item text="Analytics and Data Visualization Tools" icon="bar-chart"></ui5-side-navigation-item>
<ui5-side-navigation-item text="System Administration and Configuration Management" icon="wrench">
<ui5-side-navigation-sub-item text="Environment Settings"></ui5-side-navigation-sub-item>
<ui5-side-navigation-sub-item text="Audit Log and Security Monitoring Dashboard"></ui5-side-navigation-sub-item>
</ui5-side-navigation-item>
</ui5-side-navigation-group>
<ui5-side-navigation-group text="Business Operations">
<ui5-side-navigation-item text="Business Partners" icon="address-book" selected></ui5-side-navigation-item>
<ui5-side-navigation-item text="Sales Management and Revenue Operations" icon="area-chart"></ui5-side-navigation-item>
</ui5-side-navigation-group>
<ui5-side-navigation-item text="SAP Support Portal and Technical Assistance" href="https://openui5.hana.ondemand.com/demoapps" target="_blank" icon="message-information"></ui5-side-navigation-item>
<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
</ui5-side-navigation>
<!-- playground-fold -->
Expand Down
Loading