Vue Hexagon Menu

Usage

<template>
  <div id="app">
    <HexMenu id="main-menu">
      <span slot='icon'>MENU</span>
      <a href="/home">Home</a>
      <a href="/info">Information</a>
      <a href="/settings">Settings</a>
    </HexMenu>
  </div>
</template>

<script>
import HexMenu from '{path-to-folder}/HexMenu/HexMenu.vue'

export default {
  name: 'app',
  components: { 
    HexMenu 
  }
}
</script>

Attributes

• :animate-speed Speed of open animation (ms) (Default: 150)

• border-color Color of hexagon border (Default: 'white')

• :height Height of hexagon (Default: 100)

• id HexMenu element id.

• open-fill Color of hexagon fill when open (Default: 'white')

• :stroke-width Width of hexagon border (Default: 1)

• :width Width of content of menu (Default: 300)