AsideMenuItem

This component allows you to create an aside menu item. It depends on AsideMenuList component.

Example

AsideMenuItem

<aside-menu-item
  v-for="(item, index) in menu"
  :key="index"
  :item="item"
  @menu-click="menuClick"
/>

export default {
  name: 'App',
  data() {
    return {
      menu: [
        {
          to: '/submenu1',
          label: 'Submenu1',
          icon: 'icon1',
        },
        {
          to: '/submenu2',
          label: 'Submenu2',
          icon: 'icon2',
        },
        {
          to: '/submenu3,
          label: 'Submenu3',
          icon: 'icon3',
        }
      ]
    }
  },
  methods: {
    menuClick(item) {
      this.$emit("menu-click", item);
    }
  }
}

More about the item prop

It can have the following elements:

  • to String (nuxt-link or a)
  • menu String (In case the element is a dropdown)
  • href String
  • label String
  • icon String
  • updatemark Boolean

Props

NameDescriptionTypeRequiredDefault
itemThe aside menu item.Objectfalsenull

Events

Event NameDescriptionParameters
menu-clickFire when the item is clickedThe argument is the aside menu item