Out-of-the-box Vuetify navigation menu component, with Toolbar, Navigation Drawers, Menus, and QR code

Provide Toolbar with Navigation drawer and drop down menu as follows:

Toolbar

Dropdown Menu

Navigation Drawers

Install

By npm

npm install vuetify-nav 

# or

yarn add vuetify-nav 

Or CDN.
For more detail, refer wiki.

How to use

Just set <Navbar/> component to your App.vue file as follows:

<template>
  <v-app>
    <Navbar titleStr="Demo App" :links="links" />
  </v-app>
</template>

<script>
import {Navbar} from 'vuetify-nav'
export default {
  components: { Navbar},
  data: () => ({
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'face', text: 'Account', route: '/account'},
      { icon: 'shop', text: 'Purchase', route: '/purchase'},
    ]
  }),
};
</script>

for more detail refer wiki

Demo

Demo site is available at here.

Q&A

Github issues are available. Any questions, suggestions, request, and reports are welcome!

Author

Dr. Takeyuki UEDA

Version

• vuetify-nav@2: for Vue2 This is for the project with Vue3 + Vuetify3. For Vue2 + Vuetify2, use vuetify-nav2.

History

• 1.0.0 2023.03.12 forked from vuetify-nav@3 for the candidate of successor for Vue3.
• 1.1.0 2026.01.31 merge Vuetify-nav3.1 into this project.