Repository navigation
[ui5-side-navigation] Add new sample and update documentation #12080
Description
Discussed in #12048
Originally posted by gozld5153 July 31, 2025
I noticed that the SideNavigationItem component has the following CSS applied to the :host(:not([hidden]))
min-width: 15rem;
width: 15rem;
max-width: 100%;This seems to enforce a fixed width of 15rem, but still sets a max-width of 100%.
However, when this component is placed inside a container narrower than 15rem, it causes horizontal overflow — despite having max-width: 100%.
An intentional design decision, meaning SideNavigationItem is meant to be rigidly 15rem wide at all times?
Or is this a mistake or oversight, where responsiveness was expected but not working due to the combination of min-width and width?
In addition:
The suggestion is to create a sample in the documentation:
https://sap.github.io/ui5-webcomponents/nightly/components/fiori/SideNavigation/
with a custom width of the Side Navigation (for example, 20rem).
In the main.css file, we could add a similar description to the one in the openui5 project:
https://openui5nightly.hana.ondemand.com/api/sap.tnt.SideNavigation#controlProperties
Metadata
Metadata
Assignees
Type
Projects
- Status
Activity
gnseo commentedon Aug 7, 2025
Hi, @LidiyaGeorgieva .
I didn't see the original issue was closed, I'm not sure if you can see my comment, so I'm attaching the link of comment here too.
#12048 (reply in thread)
Regards.
chore(ui5-side-navigation): Add new sample and update documentation
chore(ui5-side-navigation): add new sample and update documentation
github-actions commentedon Aug 12, 2025
This issue has been closed. To reopen, just leave a comment!