Vue Burger Menu

2.0.5 · maintenance · verified Sun Apr 19

Vue Burger Menu is a Vue.js component that provides a collection of off-canvas sidebar menu effects and styles. It leverages CSS transitions and SVG path animations to deliver various hamburger menu experiences, such as sliding, scaling, rotating, and revealing effects. The library is currently at version 2.0.5, with its latest release six years ago, indicating a maintenance-focused cadence rather than active feature development. Key differentiators include its ready-to-use animations, customizable properties like width and position, and event hooks for managing menu state. It abstracts away complex CSS and SVG animations into easy-to-use Vue components, supporting Vue 2 and likely Vue 3 (though a separate `vue3-burger-menu` package also exists). The package aims to save screen space on mobile devices by hiding navigation until a user action reveals it.

Common errors

```
Failed to resolve component: [AnimationName]
```
cause The imported burger menu component (e.g., `Slide`, `Push`) was not registered with the Vue application or component.

fix Ensure the component is imported and correctly listed in the `components` option of your Vue component: `import { Slide } from 'vue-burger-menu'; export default { components: { Slide } }`.
```
Module not found: Error: Can't resolve 'vue-burger-menu' in '...' or similar `webpack` or `vite` error.
```
cause The `vue-burger-menu` package is not installed in your project's `node_modules` or the import path is incorrect.

fix Run `npm install vue-burger-menu --save` or `yarn add vue-burger-menu` to install the package. Verify the import path `from 'vue-burger-menu'` is correct.
```
Menu appears but page content does not move/scale, or menu is positioned incorrectly.
```
cause Using an animation that requires `pageWrapId` or `appId` props without providing the corresponding HTML structure and prop values.

fix For animations like `Push` or `ScaleDown`, ensure your template includes `<div id="app">...<main id="page-wrap">...</main></div>` and your component uses props like `<Push pageWrapId="page-wrap" appId="app" />`.

Warnings

gotcha Several advanced animations (e.g., `Push`, `PushRotate`, `ScaleDown`, `ScaleRotate`, `Reveal`) require specific HTML structure: a `pageWrapId` element wrapping your main content and an `appId` element containing everything, including the menu component. Failing to provide these elements and corresponding `pageWrapId` and `appId` props will prevent these animations from working correctly.
Fix: Ensure your application HTML includes `<main id="page-wrap">` for content and `<div id="app">` for the overall wrapper, then pass these IDs as props: `<Push pageWrapId="page-wrap" appId="app" />`.
gotcha Some animations listed in the documentation (e.g., `FallDown`, `Stack`, `Elastic`, `Bubble`) are marked as 'Work In Progress' (WIP). These animations may be incomplete, unstable, or not function as expected.
Fix: Avoid using WIP animations in production environments. Stick to stable animations like `Slide`, `Push`, `ScaleDown`, `ScaleRotate`, `Reveal`, or `PushRotate`.
gotcha The package's latest release (v2.0.5) was over six years ago (March 2020), suggesting infrequent maintenance. While functional, it may not receive updates for newer Vue versions (e.g., Vue 3+ features like Composition API) or modern browser changes.
Fix: Consider alternatives like `vue3-burger-menu` for Vue 3 projects, or be prepared to fork and maintain the code yourself for newer Vue environments.
gotcha By default, the menu opens from the left and has a width of `300px`. To change these, you must explicitly use the `right` boolean prop or the `width` string prop (e.g., `width="400"`).
Fix: To open from the right: `<Slide right />`. To set a custom width: `<Slide width="250px" />` or `<Slide :width="400" />`.

Install

npm install vue-burger-menu npm
yarn add vue-burger-menu yarn
pnpm add vue-burger-menu pnpm

Imports

Slide
wrong:
```
import Slide from 'vue-burger-menu'
```
correct:
```
import { Slide } from 'vue-burger-menu'
```
Each animation style (e.g., Slide, Push, Reveal) is a named export. Do not use a default import.
PushRotate
wrong:
```
const PushRotate = require('vue-burger-menu')
```
correct:
```
import { PushRotate } from 'vue-burger-menu'
```
CommonJS `require()` syntax is generally not supported for this module's exports; use ES module `import`.
* as BurgerMenuAnimations
```
import * as BurgerMenuAnimations from 'vue-burger-menu'
```
You can import all available animations as a namespace object if you need to dynamically reference them.

Quickstart

Demonstrates installation, basic usage of the `Slide` animation, registering the component, passing menu items as slots, and controlling the menu's open state programmatically with event handlers.

npm install vue-burger-menu --save

// In a Vue component (e.g., App.vue)
<template>
  <div id="app">
    <Slide :isOpen="isMenuOpen" @openMenu="handleOpenMenu" @closeMenu="handleCloseMenu">
      <a id="home" href="#"><span>Home</span></a>
      <a id="about" href="#"><span>About</span></a>
      <a id="contact" href="#"><span>Contact</span></a>
    </Slide>
    <main id="page-wrap">
      <h1>My Application Content</h1>
      <p>Click the burger icon to open the menu.</p>
      <button @click="toggleMenu">Toggle Menu from App</button>
    </main>
  </div>
</template>

<script>
import { Slide } from 'vue-burger-menu';

export default {
  name: 'App',
  components: {
    Slide
  },
  data() {
    return {
      isMenuOpen: false
    };
  },
  methods: {
    handleOpenMenu() {
      this.isMenuOpen = true;
      console.log('Menu opened');
    },
    handleCloseMenu() {
      this.isMenuOpen = false;
      console.log('Menu closed');
    },
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
};
</script>

<style>
body { margin: 0; font-family: sans-serif; }
#app { /* Required for some animations like Push/PushRotate */ }
#page-wrap { padding: 20px; }
</style>

view raw JSON →