Add a Hamburger Menu to a Vue App with the vue-burger-menu Library

The vue-burger-menu library lets us add a hamburger menu to our Vue app easily.

In this article, we’ll look at how to add the menu using the vue-burger-menu library.

Installation

We can install the library by running:

npm i vue-burger-menu

or

yarn add vue-burger-menu

Add the Menu

Once we installed the library, we add the menu with the Menu component.

We write:

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

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

export default {
  name: "App",
  components: {
    Slide
  }
};
</script>

to add a simple menu.

Animations

We can change the animation by adding a menu with a different component.

They include:

• Slide
• ScaleDown
• ScaleRotate
• Reveal
• Push
• PushRotate

For example, we can write:

<template>
  <div id="app">
    <ScaleDown>
      <a id="home" href="#">
        <span>Home</span>
      </a>
    </ScaleDown>
  </div>
</template>

<script>
import { ScaleDown } from "vue-burger-menu";

export default {
  name: "App",
  components: {
    ScaleDown
  }
};
</script>

to add a hamburger menu with the scale down effect with the ScaleDown component.

Properties

There are various props we can change to customize our menu.

We can add the right prop to make the menu side from the right instead of the left:

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

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

export default {
  name: "App",
  components: {
    Slide
  }
};
</script>

Also, we can change the width of the menu with the width prop:

<template>
  <div id="app">
    <Slide :width="400">
      <a id="home" href="#">
        <span>Home</span>
      </a>
    </Slide>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    Slide
  }
};
</script>

The open state can be changed with the isOpen prop:

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

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

export default {
  name: "App",
  components: {
    Slide
  }
};
</script>

The menu also emits some events. openMenu is emitted when the menu is opened.

closeMenu is emitted when the menu is closed.

For example, we can use them by writing:

<template>
  <div id="app">
    <Slide @openMenu="openMenu" @closeMenu="closeMenu">
      <a id="home" href="#">
        <span>Home</span>
      </a>
    </Slide>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    Slide
  },
  methods: {
    openMenu() {
      console.log("menu open");
    },
    closeMenu() {
      console.log("menu close");
    }
  }
};
</script>

We can disable close on outside click by using the disableOutsideClick prop:

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

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

export default {
  name: "App",
  components: {
    Slide
  }
};
</script>

Similarly, we can disable close on escape with the disableEsc prop:

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

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

export default {
  name: "App",
  components: {
    Slide
  }
};
</script>

We can turn off the overlay with the noOverlay prop:

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

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

export default {
  name: "App",
  components: {
    Slide
  }
};
</script>

Conclusion

We can add a hamburger menu with the vue-burger-menu library to a Vue app.