[Vuejs]-Vuie.js – How to have 2 rows of navigation header on Vuetify

by

3👍

✅

I think you should use these components v-system-bar in the top of page and under it use v-app-bar :

var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <div>
      <v-system-bar window dark>

        <span>Test</span>
        <v-spacer></v-spacer>

      </v-system-bar>
      <v-app-bar color="deep-purple accent-4" dense dark>


        <div class="d-flex align-center">
          <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
          <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="200" />
        </div>
        <v-spacer></v-spacer>
        <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
          <span class="mr-2">Latest Release</span>
          <v-icon>mdi-open-in-new</v-icon>
        </v-btn>




      </v-app-bar>
    </div>
  </v-app>
</div>
👤Boussadjra Brahim

Leave a comment