Awesome Sidebar Navigation Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue-awesome-sidebar
# NPM
$ npm i vue-awesome-sidebar

Description:

A fast, customizable, and responsive sidebar navigation (a.k.a offcanvas menu) component for Vue 3 applications. Dark Mode and Light Modes are supported.

How to use it:

1. Import the awesome sidebar component.

import { createApp } from 'vue'
import App from './App.vue'
import vueAwesomeSidebar from 'vue-awesome-sidebar'
import 'vue-awesome-sidebar/dist/vue-awesome-sidebar.css'

const app = createApp(App)
app.use(vueAwesomeSidebar)
app.mount("#app")

// OR Locally
import vueAwesomeSidebar from 'vue-awesome-sidebar'
import 'vue-awesome-sidebar/dist/vue-awesome-sidebar.css'
export default {
  components: {
    vueAwesomeSidebar
  }
}

2. Create a basic sidebar navigation on your web app.

<template>
  <VueAwesomeSideBar
    v-model:miniMenu="miniMenu"
    v-model:collapsed="collapsed"
    :menu="myMenu"
    vueRouterEnabel
  ></VueAwesomeSideBar>
</template>

<script setup>
import { ref } from 'vue'
const collapsed = ref(false)
const miniMenu = ref(false)
const myMenu = [
  {
    name: 'Getting Started',
    icon: { text: 'home' , class: 'material-icons-outlined' },
    children: [
      {
        name: 'level 1.1',
        href: '/a',
        icon: { text: 'home' , class: 'material-icons-outlined'},
        children: [
          {
            href: '/b',
            name: 'level 1.1.1',
          },
        ]
      },
      {
        name: 'level 1.2'
      }
    ],
  },
  {
    header: 'Settings'
  },
  {
    name: 'Dashboard',
    icon: { class: 'material-icons-outlined', text: 'dashboard' },
    children: [
      {
        href: '/c',
        name: 'level 2.1',
      },
    ]
  },
  {
    name: 'close menu',
    icon: { text: 'settings', class: 'material-icons-outlined' },
  },
]
</script>

3. Available sidebar props.

menu: {
  type: Array,
  required: true
},
menuType: {
  type: String,
  default: 'simple' // OR "fully"
},
collapsed: {
  type: Boolean,
  default: false
},
miniMenu: {
  type: Boolean,
  default: false
},
animationDuration: {
  type: Number,
  default: 300
},
width: {
  type: String,
  default: '290px'
},
widthMiniMenu: {
  type: String,
  default: '65px'
},
autoCollapse: {
  type: Number,
  default: null
},
removeIconSpace: {
  type: Boolean,
  default: false
},
closeOnClickOutSide: {
  type: Boolean,
  default: false
},
overLayerOnOpen: {
  type: Boolean,
  default: false
},
childrenOpenAnimation: {
  type: Boolean,
  default: true
},
position: {
  type: String,
  default: 'fixed'
},
keepChildrenOpen: {
  type: Boolean,
  default: false
},
ChildrenOpenActiveRoute: {
  type: Boolean,
  default: true
},
checkButtonActive: {
  type: Boolean,
  default: true
},
vueRouterEnabel: {
  type: Boolean,
  default: false
},
BottomMiniMenuBtn: {
  type: Boolean,
  default: true
},
paddingTop: {
  type: String,
  default: '0px'
},
dark: {
  type: Boolean
},
rtl: {
  type: Boolean,
  default: false
}
closeOpenMenuOnHrefPush:{
  type: Boolean,
  default: false
}

4. Slots.

<!--menu items Append icon-->
<template #itemApendIcon="{ icon,isChildrenMenuOpen, active,miniActive }"></template>
<!--menu items label -->
<template #menuItemLabel="{labelName ,isChildrenMenuOpen, active,miniActive}"></template>
<!--menu items Preppend icon-->
<template #itemPrepandIcon="{ icon,isChildrenMenuOpen, active,miniActive }"></template>
<!--menu header item-->
<template #headerItem="{ header }"></template>
<!--menu header at the top of the menu-->
<template #header></template>
<!--menu footer -->
<template #footer></template>
<!--menus bottom toggle btn -->
<template #BottomMiniMenuBtn></template>

5. Events.