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

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:

• Slide
• ScaleDown
• ScaleRotate
• Reveal
• Push
• PushRotate
• FallDown
• Stack
• Elastic
• Bubble

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
}

Preview:

Download Details:

Author: mbj36

Live Demo: https://vue-burger-menu.netlify.com/

Download Link: https://github.com/mbj36/vue-burger-menu/archive/master.zip

Official Website: https://github.com/mbj36/vue-burger-menu

Install & Download:

# Yarn
$ yarn add vue-burger-menu

# NPM
$ npm install vue-burger-menu --save