Style SideNavItem to look like a link

@quirky-zebra , is it possible to style RouteLink not to underline on mouse over?

Sure like any other anchor with the :hover selector

Could you please show me an example of CSS class (at global level)?

@harmonious-uakari we don’t have a component for that. SideNav is named that way because it’s intended for side navigation lists, rather than horizontal nav bars. RouterLinks placed in a HorizontalLayout is the best way at the moment. Tabs are a bit problematic for that in a number of ways, especially in terms of accessibility.

A RouterLink renders as a regular html element, so you can style it with

a {
  /* your css here */
}```

To remove the underline on hover, you could do

a:hover {
  text-decoration: none;
}```

@useful-whale Could you please advice whether SideNav is designed to be used inside AppLayout drawer? I added it and it looks like working but mouse pointer is not working properly (is not changed to the hand).

That’s absolutely how it’s intended to be used.
Does it otherwise look the way it does in the documentation samples? https://vaadin.com/docs/latest/components/side-nav

Yes, apart from that it looks like in the documentation.

which Vaadin version are you on?

I am on 24.1.14

ah, that’s it then. The docs show the 24.2 version, which has been improved in various ways.

when it is supposed to be released?

mid-October

but you can use the beta already today

@quirky-zebra Could yo please advice how to highlight RouteLink in case if view is opened as default alias for “”? For example, if I open “ui/transactions” than everything works correctly, but if I open just “ui/” than default view is opened but corresponding RouteLink is not highlighted …

The HighlightActions is just a helper class providing different lambda, you can create your own custom method that also takes the current root path and highlights the link