Registry / web-framework / vue-burger-menu

vue-burger-menu

library2.0.5jsnpmunverified

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.

web-framework

npm install vue-burger-menu

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-BURGER-MENU

vue-burger-menu

web-frameworkjavascriptv2.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Slide

✓ import { Slide } from 'vue-burger-menu'

✗ 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

✓ import { PushRotate } from 'vue-burger-menu'

✗ const PushRotate = require('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.

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>

Debug

Known issues

gotchaSeveral 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" />`.

affects: >=0.0.8

gotchaSome 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`.

affects: >=1.0.0

gotchaThe 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.

affects: >=2.0.0

gotchaBy 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" />`.

affects: *

Errors

Common errors & fixes

Failed to resolve component: [AnimationName]

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.

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.

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" />`.

Upgrade

Version history

2.0.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mbj36/vue-burger-menu ↗

packagehttps://www.npmjs.com/package/vue-burger-menu ↗