Style SideNavItem to look like a link

I replaced navbar tabs (that are considered obsolete now) with SideNavItem and everything woks OK in terms of functionality but I liked the previous view more … Could you please advice how to style SideNavItem to look like a link but not a button?

the CSS selectors for the component are listed here

So, you want blue text with underlines?

You could do that e.g. with

vaadin-side-nav::part(link) {
  color: var(--lumo-primary-text-color);
  text-decoration: underline;

@useful-whale , thank you for advice. Though, proposed solution does not work for me (changes nothing) … Probably, I am using SideNavItem component incorrectly - could you please look at the MainLayout attached? Also, apart from styling, in my code pointer is not changed to the hand when mouse is over the item … (1.93 KB)

Could you please help me to fix at least mouse pointer? Currently it’s not quite clear that navbar items are selectable …

Why not just using “new RouterLink”?

Well, RouterLinks also work not perfectly … All links look the same, current active link is not highlighted.

RouterLink can be configured to highlight depending on different states, there is literally an API for anything on that component

Where can I find some examples? I am new in Vaadin (and in frontend technologies as well) so it’s rather hard for me to get even simple things working properly without looking at some examples or tutorials …

Not sure if they are docs (Rolf, you seen them somewhere?)


This should apply the highlight attribute to the link which you can target in css


or this would add a class name, probably easier for you to target (a.highlight)

Thank you, @quirky-zebra, this works! Nevertheless, could you please also advice how to enable correct mouse pointer in SideNavItem? This component looks nicer in some places …

SideNavItem is not meant to be used without SideNav tho.

yeah no, the docs have examples how to use SideNav:

here are docs for all Vaadin components:

The “Show Code” button-thingy below each UI sample in the docs reveals the code:

That’s usually a good place to start if you suspect you don’t know how to use a component

But there is no docs about RouterLink and all its possible APIs, or?

@useful-whale , yes, I’ve read all that. But what is the recommended way to prepare simple horizontal nav bar now? Here is an example with tabs: that is supposed to be obsolete, right? According to the comments SideNavItem is supposed to replace it … But it looks like this is also not the case.