Vue.js plugin for Tasty CSS-animated hamburgers

Vue Burger is a Vue component/plugin that is a wrapper around Tasty CSS-animated hamburgers, wellknown css library for hamburger icons.

npm install vue-burger
# or
yarn add vue-burger

import App from './App.vue';
import VBurger from 'vue-burger';
import Vue from 'vue';

Vue.use(VBurger);

new Vue({
  render: h => h(App),
}).$mount('#app');

VBurger component can be used in without plugin initialization:

<template>
  <v-burger/>
</template>

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

export default { 
  component: {
    VBurger
  }
}
</script>

<template>
  <v-burger type="arrow" />
</template>

• type: String,
• default: 'boring'

• type: Object,
• default: {}

• type: String,
• default: 'Menu'

• type: String,
• default: 'navigation'

• type: Number,
• default: 0

Available types are:

• 3dx,
• 3dx-r,
• 3dy,
• 3dy-r,
• 3dxy,
• 3dxy-r,
• arrow,
• arrow-r,
• arrowalt,
• arrowalt-r,
• arrowturn,
• arrowturn-r,
• boring,
• collapse,
• collapse-r,
• elastic,
• elastic-r,
• emphatic,
• emphatic-r,
• minus,
• slider,
• slider-r,
• spring,
• spring-r,
• stand,
• stand-r,
• spin,
• spin-r,
• squeeze,
• vortex,
• vortex-r

You can see all the types in actions on official documentation for Hamburgers.

For styling regular CSS variables are used. Variables are defined in burgerStyle prop. Available variables:

Example:

<template>
  <v-burger 
    :type="arrow" 
    :burgerStyle="burgerStyle">
  </v-burger>
</template>

<script>
  export default {
    data() {
      return {
        burgerStyle: {
          '--padding': '10px',
          '--layer-bg-color': 'yellow',
          '--active-layer-bg-color': '#ABABAB',
          '--layer-width': '20px',
        }
      }
    }
  }
</script>

Burger has one named slot for setting label for accessability as suggested by Hamburgers author.

Example:

  <v-burger>
    <template v-slot:label>
      <span class="hamburger-label">Menu</span>
    </template>
  </v-burger>

Burger components emits updated event that exposes the active state. It fires after the burger button is clicked. Check the example for usage.

Example with sync modifier:

  <v-burger 
    @update="isActive = $emit
  </v-burger>

# Running examples
npm run serve

# Running tests
npm run test

# Running build
npm run build

All contributions are welcome.

MIT @ Zdravko Ćurić (zcuric)

Icon made by Freepik from flaticon.