Right Align <v-btn text> in Vuetify Toolbar

Question

I am trying to right-align the last two buttons in my Vuetify toolbar but am having no luck. I have tried assigning the class text-right as well as my own class where I float: right and so on. Is there a simple solution to this that I am missing?

    <v-toolbar 
      :dense="true"
      :flat="true"
      :color="'blue darken-4'"
      :dark="true"
    >
     <v-toolbar-items>
        <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
        <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
        <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
        <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
        <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
        <v-btn text><img class='icon' src="../images/box.png">Inventory</v-btn>
        <v-btn text><img class='icon' src="../images/legend.png">Leadership</v-btn>
        <v-btn text><img class='icon' src="../images/seiu.png">Learning</v-btn>
        <v-btn text><img class='icon' src="../images/search.png">Search</v-btn>
        <v-btn text class="text-right">Username</v-btn>
        <v-btn text class="text-right">Logout</v-btn>
      </v-toolbar-items>
    </v-toolbar>

Right now it looks like this:

I'd like the "username" and "logout" text to be all the way to the right.

Answer 1

You could achieve requirements using below changes

As per toolbars docs in first example, you can see they are using <div class="flex-grow-1"></div> to right align the icons.

<v-toolbar :dense="true" :flat="true" :color="'blue darken-4'" :dark="true">
  <v-toolbar-items>
    <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
    <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
    <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
    <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
    <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
  </v-toolbar-items>

  <div class="flex-grow-1"></div>

  <v-toolbar-items>
    <v-btn text>Username</v-btn>
    <v-btn text>Logout</v-btn>
  </v-toolbar-items>
</v-toolbar>

And you could also achieve by using below css in your exiting code

.text-right {
  float: right;
}

.custom_cls {
  display: block;
  width: 100%;
}

<v-toolbar :dense="true" :flat="true" :color="'yellow darken-4'" :dark="true">
  <v-toolbar-items class="custom_cls">
    <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
    <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
    <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
    <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
    <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
    <v-btn text class="text-right">Username</v-btn>
    <v-btn text class="text-right">Logout</v-btn>
  </v-toolbar-items>
</v-toolbar>

You can check here with working demo.