Vue Burger

Vue.js plugin for Tasty CSS-animated hamburgers

About

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

Installation

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

Initialization

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>

Usage

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

Props

type

• type: String,
• default: 'boring'

burgerStyle

• type: Object,
• default: {}

ariaLabel

• type: String,
• default: 'Menu'

ariaControls

• type: String,
• default: 'navigation'

tabIndex

• type: Number,
• default: 0

Types of burger

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.

Styling the burger

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

Variable	Description	Default value
--padding	padding of the hamburger box	15px
--bg-color	hamburger background color	transparent
--box-width	hamburger box width	40px
--box-height	hamburger box height	24px
--layer-width	width of each hamburger layer	40px
--layer-height	height of each hamburger layer	4px
--layer-bg-color	layer background color	#000000
--active-layer-bg-color	layer background color when in active state	--layer-bg-color

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>

Slots

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

Slot	Description
label	label for a11y

Example:

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

Events

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

Event	Description	Params
updated	fired after the burger button is clicked	active (Boolean)

Example with sync modifier:

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

Development

# Running examples
npm run serve

# Running tests
npm run test

# Running build
npm run build

Contributing

All contributions are welcome.

License

MIT @ Zdravko Ćurić (zcuric)

Icon made by Freepik from flaticon.