How do i style the label within a SideNavItem?

Heya everyone! :wave:t6:
I have a (hopefully) simple question:

I wanted to style the label of a SideNavItem according to the documentation with the command shown in the attached image. (**Documentation: **SideNavItemDoc,
**JavaCode: **SideNavItemInitialization,
CSS: SideNavItemCSS)

However this command seems to style the prefix icon instead of the label. (SideNavItemResult)

My goal was to set the whitespace property within the label so the text is not hidden on smaller screens.
(Aimed Result)

Interestingly, I’m able to do so within the Inspector of my Browser(FireFox 118.0.1 (64-Bit)) by changing the whitespace setting from no-wrap to normal.
(LabelCSSInspector)

However I’m unable to access the unnamed slot containing the label within the Shadowdom of the SideNavItem.
SideNavItemDoc.png
SideNavItemCSS.png
Aimed_Result.png

How do i style the label within a SideNavItem?

Looks like the docs are not correct here. For that selector to work the slot would need to contain an HTML element, but it only contains a text node which you can not target. Apart from that the styles that you want to change are on the unnamed slot, which as you discovered can not be changed from the light DOM.
The only option I can think of is to use shadow DOM styling: https://vaadin.com/docs/latest/styling/advanced/shadow-dom-styling. Assuming you use a custom theme, create a file frontend/themes/my-theme/components/vaadin-side-nav-item.css, replacing my-theme with the name of your theme. Then in that file you can target the slot:

slot:not([name]) {
  ...
}

Ah, indeed, the structure of the Sidenav component has changed between 24.1 and 24.2, and the docs have not been updated yet.

I’ll take care of that right now. Thanks for the heads up!

Thanks for the quick help guys!
@cheerful-baboon I can confirm that shadow DOM styling would work :slightly_smiling_face:

isn’t it strange that stuff like this change in point releases. so If I make an app in 24.1 it will not work the same if I upgrade to 24.2? or is this beta code?

Yes, Sidenav was still released under a feature flag in 24.1, and this kind of breaking change was clearly announced:

I see, thanks