Vue Hamburgers

Display a burger for menu as component, fork from github.com/jonsuh/hamburgers, you can choose hamburger animation with prop type. Check jonsuh.com/hamburgers for examples.

Documentation

Install it with Yarn or NPM

yarn add -vue-hamburgers

OR

npm i vue-hamburgers --save

Import it, ES6 way, in main.js / app.js file

import hamburger from 'vue-hamburgers'
 
Vue.use(hamburger)

For Nuxt.js

Create a plugin like plugins/vue-hamburgers.js

import Vue from 'vue'
import hamburger from 'vue-hamburgers'
 
Vue.use(hamburger)

In nuxt.config.js import plugin

export default {
  // ...
  plugins: [
    { src: '@/plugins/vue-hamburgers', mode: 'client' },
  ],
  // ...
}

In any .vue component import in with <client-only>

<template>
  <client-only>
    <hamburger />
  </client-only>
</template>

Usage

Use it in a .vue file

<template>
  <div>
    <hamburger />
  </div>
</template>

Define type with prop type

<div>
  <hamburger type="3dx" />
</div>

API

<template>
  <hamburger
    type="spring"
    :width="30"
    :height="3"
    :spacing="0.8"
    color="red"
  />
</template>

Check all available type on jonsuh.com/hamburgers, use it in lowercase like this type="arrow"

Props	Type	Default	Describe
type	String	'spring'	Type of hamburger animation
width	Number / String	40	Define width of hamburger
height	Number / String	4	Define height of bars of hamburger
spacing	Number / String	1	Define spacing between bars of hamburger, reduce with '0.8' or increase with '1.2'
color	String	#000000	Set color with hexa code

License

MIT © @jonsuh, @ewilan-riviere