Hi there. Side Navigation is a great component, but in my case I wan’t to use it without routing actions but like a button (click on SideNavItem changes components on another layout). Is there a way to achieve something like onClick on a SideNavItem?
Why not just use a button? You really shouldn’t use anchors (like SideNavItem, RouterLink, and Anchor) as buttons — they’re intended for navigation.
SideNav does not support components except SideNavItem directly. I know workarounds using the Element API but those won’t probably created valid html.
I had also researched the same for the SideNav but it cost me a lot…
In the end I ended up using buttons, and adding css and transitions to make them look like the SideNav items.
I totally get the request. I needed the same when I built StarPass, add some buttons in the navigation rail and make them look the same as Side Nav Items.
That said, I wouldn’t put them inside Side Nav.
Mmmm an interesting approach… I had added the buttons inside the content, but I’m getting the idea…
Rafał, could you elaborate on your use case?
EDIT: Didn’t mean for this to be a reply to you, knoobie. Seems I can’t change that. 
Is this something like this you are looking for ?
SideNavItem i = new SideNavItem(“label”, (Class<? extends Component>)null , icon);
i.getElement().addEventListener(“click”, (e) → {
// do something
});
Thank you all for the feedback! I urge to use SideNavigation component due to ton of implemented functionality. It supposed to be main menu of my software which is grouped and multi level so it suits perfectly.
@Gael_Sainson thank you! I will try this!
It seems that might work even with the keyboard (a click listener). Though only when pressing the Enter key, but not when pressing Space, so it’ll be slightly different from other buttons.
Also, you should change the role from a link to a button. But I’m not sure what the best way to do that is, since the native <a> element with the link role is in the shadow DOM of the Side Nav Item. You need a bit of executeJs for that.
@Gael_Sainson Thanks, works like a charm!
@Jouni1 thank you for pointing that out.
Right now I need to manually highlight active SideNavItem. I don’t see any “setHighlighted” kind of method no SideNav and SideNavItem either. I suppose the only way i to manually add proper css class to selected Item and remove from previous selection?
I deal with it with addClassName & removeClassName on SideNavItem (I removed the previously selected one and add the class on the new one)
My css lloks like this :
vaadin-side-nav-item.menuSelected::part(link) {
color: white !important;
background-color: #1FBACA;
}
vaadin-side-nav-item.menuSelected > vaadin-icon {
color: white !important;
background-color: #1FBACA;
}
vaadin-side-nav-item.menuSelected::part(link):hover {
text-decoration: underline;
}
Not sure it is the right way to do but it works for me …