Vuetify multi-line v-toolbar-items on smaller breakpoints

Question

I am working with the Vuetify toolbar, and trying to allow the toolbar items on smaller breakpoints move to a new line using the grid system. Essentially, the toolbar should be able to have many toolbar items on the right side, that when resizing the window to smaller breakpoints, will begin to move the buttons below the other ones on a new line, increasing the toolbar height while doing so.

I have tried different flags for v-layout/v-flex combinations, but am not getting the results I need.

I've been testing this on a codepen: https://codepen.io/rpreilley/pen/JebLGz

When resizing the window, the buttons within the toolbar-items do not move to a new row with the row wrap flags on the layout.

Here is the template code. I am strictly dealing with the HTML template, not any css or data:

<div id="app">
  <v-app>
    <v-content>
      <v-layout>
        <v-toolbar dense flat>
          <v-toolbar-side-icon></v-toolbar-side-icon>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-text-field
            hide-details
            prepend-icon="search"
            single-line
          ></v-text-field>
          <v-spacer></v-spacer>
          <v-layout justify-end row wrap>
            <v-toolbar-items>
              <v-btn flat>Link One</v-btn>
              <v-btn flat>Link Two</v-btn>
              <v-btn flat>Link Three</v-btn>
              <v-btn flat>Link Four</v-btn>
              <v-btn flat>Link Five</v-btn>
              <v-btn flat>Link Six</v-btn>
            </v-toolbar-items>
          </v-layout>
        </v-toolbar>
      </v-layout>
    </v-content>
  </v-app>
</div>

I am new to vuetify, so this could be something I'm missing in the docs. Any help would be greatly appreciated.

Imtiaz Imtiaz · Accepted Answer · 2020-05-06T09:38:09

I'm new to vuetify too. Since I'm facing similar problem, here's my solution I wanted to share:

.toolbar__items {
  flex-wrap: wrap;
}

Codepen: https://codepen.io/imtiazmahbub/pen/QWjQjML

Vuetify multi-line v-toolbar-items on smaller breakpoints

1 Answers