Controlling position of tabs in layout toolbar

  • Is it possible to get tabs to float left next to a toolbar title, with nothing but empty space to the right? Currently, the code below puts the title top left, and the tabs top right, which looks very odd on a wide desktop window. I tried applying the positioning classes to the tabs, but couldn’t get anything to change.

    Supplementary question - is it possible to make the q-toolbar-title clickable like a tab to get back to the ‘home’ page ('/')? I tried adding a click handler to it, but nothing seems to happen, and the mouse pointer would obviously need updating too.

          <div slot="header" class="toolbar">
            <q-toolbar-title>Page Title</q-toolbar-title>
              <q-tab route="/route1">
                First Tab
              <q-tab route="/route2">
                Second Tab

  • Admin

    Use CSS helper classes from here:
    to add the “space” you want, add an empty <div class="auto"></div> between title and tabs.

Log in to reply