vue-sidebar-menu
A Vue.js Sidebar Menu Component
Demo
Installation
npm i vue-sidebar-menu --save
Install the plugin globally.
//main.jsVue
Or import the component locally.
//App.vue components: SidebarMenu
from v3.0.0 you will need to import the style file in your project.
Usage
Vue-router Support
if you are using vue-router, the component will use <router-link>
instead of hyperlink <a>
Props
props: menu: type: Array required: true collapsed: type: Boolean default: false width: type: String default: '350px' widthCollapsed: type: String default: '50px' showChild: type: Boolean default: false theme: // available themes: 'white-theme' type: String default: '' showOneChild: type: Boolean default: false rtl: type: Boolean default: false
Events
...methods: { onCollapse(collapsed) {}, onItemClick(event, item) {}}...
@collapse(collapsed) Trigger on btn-collapse click
@item-click(event, item) Trigger on item click
Styles
All styles customization can be done in normal CSS by using this classes
or you can override Sass variables and create your own theme
/*app.scss*/;;
Customize Icons
The component use Font Awesome 5 Free
as default for the icons, but you can customize them using slots
Slots
header footer collapse-icon dropdown-icon
Development
npm install
npm run dev