vue-super-menu v0.0.6

vue-super-menu

Vue Super menu component with 4 types of Menu

Install

$ npm install vue-super-menu

Usage

<script>
  import VueSuperMenu from "vue-super-menu";

  export default {
    components: { VueSuperMenu},
  };
</script>

<template>
  <div>
    <VueSuperMenu :menuArray="menu"></VueSuperMenu>
  </div>
</template>

Array example

If you want to test, copy this array on your code to see how it works

menu: [
{//type 4 - most complex menu variant
    name: 'Type4',
    icon: 'fas fa-bars',
    _id: '12333a',
    showItems: false, 
    link: './type4',
    categoryList:[
    {
        name: 'Smartphones and Cellphones', 
        _id: 'b4', 
        img: '',
        link: './smartphones',
        subMenuList:[
        {name: 'Smartphones', _id: 'b31', link: './smartphones', subsubMenuList: [{name: 'Samsung', link: './Samsung',}, {name: 'Motorola'}, {name: 'Apple'}]},
        ]
    },
    ]
},
{
    name: 'Type3', 
    showItems: false, 
    _id: 'b3', 
    link: './type3',
    subMenuList:[
    {name: 'Smartphones', _id: 'b31', subsubMenuList: [{name: 'Samsung'}, {name: 'Motorola'}, {name: 'Apple'}, {name: 'Nokia'}]},
    {name: 'Fone de ouvido', _id: 'b32', subsubMenuList: [{name: 'JBL'}, {name: 'Philips'}, {name: 'Sony'}, {name: 'Multilaser'}]},
    {name: 'Carregadores', _id: 'b33', subsubMenuList: [{name: 'Xiaomi'}, {name: 'Samsung'}, {name: 'Apple'}, {name: 'Motorola'}]},
    {name: 'Smartphones usados', _id: 'b34', subsubMenuList: [{name: 'Samsung'}, {name: 'Motorola'}, {name: 'Apple'}, {name: 'Nokia'}, {name: 'Xiaomi'}]},
    {name: 'Outros', _id: 'b35', subsubMenuList: [{name: 'Samsung'}, {name: 'Motorola'}, {name: 'Apple'}, {name: 'Nokia'}]},
    ]
},
{name: 'Type2', showItems: false, _id: 'b2', link: './example', subMenuList:[{name: 'Smartphones', link: './smartphones'},{name: 'Earphone', link: './earphone'},{name: 'Chargers'},{name: 'Others'}]},
{name: 'Type1', _id: 'b1', link: './type1',},
],

Layout fix

Depending on menu position, you have to set margin-left on 2 items

.menu-item-4, .menu-item-3{
  margin-left: -172px;
}