Side Navigation: API/CSS Selector to change text wrap property of navigation link

[bking-encodia]

Describe your motivation

Using Vaadin 24.2.1. If the width of the navigation link text exceeds the width of the navigation component I would like the link text to wrap. Using the current CSS selectors available I tried:

vaadin-side-nav-item::part(link) {
    white-space: break-spaces;
}

But this has no effect as the white-space property is applied to an internal slot element that apparently has no selectors

Describe the solution you'd like

A CSS new selector and/or API for the Side Navigation component that allows you modify white-space property for navigation link

Describe alternatives you've considered

Tried different selectors with no success

Additional context

No response

[rolfsmeds]

Good idea.

The problem is that there is no proper element wrapper around the item's label, only a <slot>, and I'm not sure if it's kosher (or even possible) to have a part attribute on a slot.

If not, then we'd either have to introduce a wrapper around the slot, or, as suggested, introduce a CSS property for the white-space.

I think I would actually prefer a wrapper with a part name (e.g. label), as that would make it possible to apply other CSS to the label as well, without affecting the prefix and suffix elements.

WDYT @web-padawan ?

[web-padawan]

IMO adding a wrapper around the slot makes sense (this is what we generally do in other components).