How can I make the text wrap in a SideNavItem?

I need the text to wrap in the SideNavItem component but cannot find the proper css selector. vaadin-side-nav-item::part(link) does not work, for example. Does anyone have a suggestion?

You would have to modify the style of side-nav-item::part(link) slot, which is difficult.

You could try item.setText(null) and instead use item.add(new Span("TEXT")) and add white-space: break-spaces to the Span

Thank you, it works:

sideNavItem.getElement().setText("");
sideNavItem.getElement().appendChild(new Span(viewName).getElement());

It does however cause some odd behaviour with a screen reader, going to have to test more.

I achieved this in V24 by createing a vaadin-side-nav-item.css file:
frontend/themes/mytheme/components/vaadin-side-nav-item.css
(use your own theme name in place of mytheme)

:host slot:not([name]) {
    overflow: visible;
    white-space: normal;
}
1 Like

image.png