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

This Package is the successor of vuetify-nav for Vue2 + Vuetify2.
For Vue3 + Vuetify3, package is avallable at vuetify-nav3.

What is Vuetify-nav for?

For Providing 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-nav2'
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
• vuetify-nav@3: for Vue3

History

• 1.0.0 2023.02.25 forked from vuetify-nav
• 1.1.0 2023.03.11 add svg to menu
• 1.2.0 2023.03.11 add qrExp props