Why is SideNavigationItem styled with min-width: 15rem; width: 15rem; max-width: 100%?

[gozld5153]

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?

[Lukas742]

Hi @gozld5153

I'll transfer this question to the ui5-webcomponents repo, as the component is developed there.

[nnaydenow]

Hi @sap/ui5-webcompoents-topic-rd,

Could you please take a look at that discussion?

Regards,
Nayden

[LidiyaGeorgieva]

Hello @gozld5153 ,

Depending on the theme, a minimum width is defined by design (16rem for the Horizon theme).
You can increase the width, but it cannot be set to a smaller value.

Regards,
Lidiya

[gnseo]

Hi, @LidiyaGeorgieva .

I understand that there is minimum width to be set by design, and I think it's enough with "min-width".
But there is a problem since the "width" is also set as the minimum width as well.
When a container's width of SideNavigation is wider than 15rem, there will be unnecessary gap on the right of SideNavigation.

So I think the "width" would be better to be removed.

Please have a look at following screenshots.

Regards.

[duygu-rmdn]

Hi @gnseo,

We cannot remove the width because this is the default width that the side navigation should have by design.

If it is removed and there is very long text, the side navigation will expand to the width of the text, which may result in an unexpected layout.

For your use case, the best approach would be to fill the gap by setting the width explicitly:

ui5-side-navigation {
  width: 100%;
}

Does this solution work for you?

Best regards,
Duygu

[LidiyaGeorgieva]

Issue for update of the documentation created: #12080