How to make sidenav items responsive

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;
}
2 Likes