Vaadin 21 Menubar vs Tabs for navigation

Admin 1
Viewed 232

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?
vaadin21 vaadin-flow vaadin
1 Answers

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).

user_3965730
Related