Multi-level Sidebar Menu Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-sidebar-menu
# NPM
$ npm install vue-sidebar-menu --save

Description:

An easy to use multi-level sidebar navigation component designed for Vue.js dashboard applications.

How to use it:

1. Install & import the component.

import Vue from 'vue'
import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
Vue.use(VueSidebarMenu)
// or
import { SidebarMenu } from 'vue-sidebar-menu'
export default {
  components: {
    SidebarMenu
  }
}

2. Create a basic sidebar navigation on the app.

<template>
  <sidebar-menu :menu="menu" />
</template>
<script>
  export default {
      data() {
          return {
              menu: [
                  {
                      header: true,
                      title: 'Main Navigation',
                      hiddenOnCollapse: true
                  },
                  {
                      href: '/1',
                      title: 'Menu 1',
                      icon: 'ICON CLASS HERE'
                  },
                  {
                      href: '/2',
                      title: 'Menu 2',
                      icon: 'ICON CLASS HERE',
                      child: [
                          {
                              href: '/2-1',
                              title: 'Menu 2-1'
                          }
                      ]
                  }
              ]
          }
      }
  }
</script>

3. Possible props.

// Sidebar menu (required)
menu: {
  type: Array,
  required: true
},
// Sidebar Collapse state
collapsed: {
  type: Boolean,
  default: false
},
// Sidebar width (expanded)
width: {
  type: String,
  default: '350px'
},
// Sidebar width (collapsed)
widthCollapsed: {
  type: String,
  default: '50px'
},
// Keep only one child opened at a time (first level only)
showOneChild: {
  type: Boolean,
  default: false
},
// Keep all child open
showChild: {
  type: Boolean,
  default: false
},
// Sidebar right to left
rtl: {
  type: Boolean,
  default: false
},
// Make sidebar relative to the parent (by default the sidebar is relative to the viewport)
relative: {
  type: Boolean,
  default: false
},
// Hide toggle collapse btn
hideToggle: {
  type: Boolean,
  default: false
},
// Sidebar theme (available themes: 'white-theme')
theme: {
  type: String,
  default: ''
},
// Disable hover on collapse mode
disableHover: {
  type: Boolean,
  default: false
}

Preview:

Changelog:

v5.3.1 (01/16/2024)

• bugfix

v5.3.0 (12/27/2023)

• feat: add new item property isActive

v5.2.12 (11/23/2023)

• update

v5.2.11 (09/07/2023)

• update

v5.2.10 (07/18/2023)

• update

v5.2.8 (05/11/2023)

• fix item icon

v5.2.6 (04/17/2023)

• update

v5.2.5 (11/28/2022)

• bugfix

v5.2.4 (06/19/2022)

• fix icon size on subitems

v5.2.3 (05/10/2022)

• update

v5.2.2 (03/24/2022)

• fix & refactor sidebar global state