1

Context: Vaadin 21, Java 8.

On top of a Vaadin 21 sample application (from https://start.vaadin.com/app/ ) I wrote my own RouterLayout with navigation bar on top, body in the middle and footer at the bottom (as exchange for the MainLayout in the sample application).

In the navigation bar I put a MenuBar ( https://vaadin.com/docs/latest/ds/components/menu-bar ) with some RouterLinks in it.

When the user clicks at one of the RouterLinks in the MenuBar, then the whole page refreshes and also my RouterLayout is reinstantiated (= constructor is called).

When I exchange the MenuBar by a Tabs component ( https://vaadin.com/docs/latest/ds/components/tabs ), then the click at the same RouterLink as before just exchanges the content of the body in the RouterLayout (as expected).

I know this hint at https://vaadin.com/docs/latest/ds/components/menu-bar, but I don't know why there is a difference between MenuBar and Tabs:

Menu Bar should not be used for navigation. Use tabs for switching between content, or anchor elements for regular navigation.

So my questions are:

  1. Why is there a difference (the page refresh) between MenuBar and Tabs in navigation, even when I use the same code for RouterLink creation in both cases?
  2. Why should the MenuBar not be used for navigation?
  3. Is there a way to do navigation without page refresh with the MenuBar?
Anna Koskinen
  • 1,362
  • 3
  • 22

1 Answers1

3

Why should the MenuBar not be used for navigation?

I think the main reason is because by default the Vaadin Menu Bar does not use <a href> elements, but instead relies on JS event listeners. If it’s technically possible to use anchors within it, I suppose it could be fine.

Though, I would assume it would not be the best possible experience for assistive tech users, as all/most of the links would be initially hidden (you need to manually open each menu to see them).

Jouni
  • 2,830
  • 15
  • 12
  • Also, note that you will get additional tab stops when using links/anchors inside Menu Bar, which can be unexpected for the user. – Jouni Nov 16 '21 at 13:19