How to make sidenavitem responsive, if the name contains 2 or more words and does not fit in one line, then those words that does not fit should start from another line. In my case text is truncated. I want SideNavItem to display the long text on multiple lines instead of adding ellipsis at the end.
The vaadin-side-nav-item has a <slot> element in shadow DOM and sets white-space: nowrap on it. To disable it, create a vaadin-side-nav-item.css file and place it in the components folder of your application theme as described in the shadow DOM styling docs.
slot {
white-space: normal;
}
1 Like