Off-canvas Hamburger Menu System For Vue - burger-menu

Install & Download:

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

Description:

burger-menu is a mobile-first off-canvas sidebar menu system for Vue.js applications.

It comes with a collection of effects and styles using CSS transitions and SVG path animations.

Animations Included:

How to use it:

1. Install, import, and register the component.

// import an animation
import { Slide } from 'vue-burger-menu'
// register the component
export default {
  components: {
    Slide
  }
}

2. Add a burger menu component to the template.

<template>
  <Slide>
    <a id="home" href="#">
      <span>Home</span>
    </a>
  </Slide>
</template>

3. Possible props.

isOpen: {
  type: Boolean,
  required: false
},
right: {
  type: Boolean,
  required: false
},
width: {
  type: [String],
  required: false,
  default: '300'
},
disableEsc: {
  type: Boolean,
  required: false
},
noOverlay: {
  type: Boolean,
  required: false
},
onStateChange: {
  type: Function,
  required: false
},
burgerIcon: {
  type: Boolean,
  required: false,
  default: true
},
crossIcon: {
  type: Boolean,
  required: false,
  default: true
},
disableOutsideClick: {
  type: Boolean,
  required: false,
  default: false
},
closeOnNavigation: {
  type: Boolean,
  required: false,
  default: false
}