title: Vaadin 21 Menubar vs Tabs for navigation
body: <p>Context: Vaadin 21, Java 8.</p>
  <p>On top of a Vaadin 21 sample application (from <a href="https://start.vaadin.com/app/" rel="nofollow noreferrer">https://start.vaadin.com/app/</a> ) I wrote my own <code>RouterLayout</code> with navigation bar on top, body in the middle and footer at the bottom (as exchange for the <code>MainLayout</code> in the sample application).</p>
  <p>In the navigation bar I put a <code>MenuBar</code> ( <a href="https://vaadin.com/docs/latest/ds/components/menu-bar" rel="nofollow noreferrer">https://vaadin.com/docs/latest/ds/components/menu-bar</a> ) with some <code>RouterLink</code>s in it.</p>
  <p>When the user clicks at one of the <code>RouterLink</code>s in the <code>MenuBar</code>, then the whole page refreshes and also my <code>RouterLayout</code> is reinstantiated (= constructor is called).</p>
  <p>When I exchange the <code>MenuBar</code> by a <code>Tabs</code> component ( <a href="https://vaadin.com/docs/latest/ds/components/tabs" rel="nofollow noreferrer">https://vaadin.com/docs/latest/ds/components/tabs</a> ), then the click at the same <code>RouterLink</code> as before just exchanges the content of the body in the <code>RouterLayout</code> (as expected).</p>
  <p>I know this hint at <a href="https://vaadin.com/docs/latest/ds/components/menu-bar" rel="nofollow noreferrer">https://vaadin.com/docs/latest/ds/components/menu-bar</a>, but I don't know why there is a difference between <code>MenuBar</code> and <code>Tabs</code>:</p>
  <blockquote>
  <p>Menu Bar should not be used for navigation. Use tabs for switching
  between content, or anchor elements for regular navigation.</p>
  </blockquote>
  <p>So my questions are:</p>
  <ol>
  <li>Why is there a difference (the page refresh) between <code>MenuBar</code> and <code>Tabs</code> in navigation, even when I use the same code for <code>RouterLink</code> creation in both cases?</li>
  <li>Why should the <code>MenuBar</code> not be used for navigation?</li>
  <li>Is there a way to do navigation without page refresh with the <code>MenuBar</code>?</li>
  </ol>