Style SideNavItem to look like a link

Flow
1

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?

2

the CSS selectors for the component are listed here https://vaadin.com/docs/latest/components/side-nav/styling

3

So, you want blue text with underlines?

4

You could do that e.g. with

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

@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 …
MainLayout.java (1.93 KB)

6

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

7

Why not just using “new RouterLink”?

8

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

9

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

10

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 …

11

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

link.setHighlightCondition(HighlightConditions.sameLocation());

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

12

link.setHighlightAction(HighlightActions.toggleClassName(“highlight”));

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

13

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 …

14

SideNavItem is not meant to be used without SideNav tho.

15

yeah no, the docs have examples how to use SideNav: https://vaadin.com/docs/latest/components/side-nav

16

here are docs for all Vaadin components: https://vaadin.com/docs/latest/components

17

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

18

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

19

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

20

@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: https://vaadin.com/docs/latest/components/app-layout 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.