How to change/modify the MenuItems?

[bhattji]

Pardon me for such a naive question, but I fail to understand, where to change/modify the MenuItems?

[akahon]

There are menuItems properties that make up an array of menu items. Here is an example [{link: "#", name: "Dashboard", tooltip: "Dashboard", icon: "bx-grid-alt" }]

[bhattji]

Can we have submenu item? How?

[bhattji]

There are menuItems properties that make up an array of menu items. Here is an example [{link: "#", name: "Dashboard", tooltip: "Dashboard", icon: "bx-grid-alt" }]

Am I missing something?

This is what I am doing in Laravel

@include('layouts.navigation')

{{ $slot }}

[akahon]

<vue-sidebar-menu-akahon :menuItems='[{link: "/dash",name: "Dash", tooltip: "Dash", icon: "bx-grid-alt" }]' />

[Aditya-Raj-Tiwari]

what if the element has child? I used the following code but it does not work:

<template>
  <div>
    <VueSidebarMenuAkahon :menu-items="computedMenu" :isUsedVueRouter="true" />
  </div>
</template>

  <script>
import VueSidebarMenuAkahon from "vue-sidebar-menu-akahon";

export default {
  name: "component.vue",
  components: { VueSidebarMenuAkahon },
  props: {
    connections: Array,
  },
  computed: {
    computedMenu() {
      const baseMenu = [
        {
          link: "/dashborad",
          name: "Dashboard",
          tooltip: "Dashboard",
          icon: "bx-grid-alt",
        },
        {
          link: "/modules",
          name: "Modules",
          tooltip: "Modules",
          icon: "bx bx-cart",
          child: [
            {
              link: "/dashborad",
              name: "Dashboard",
              tooltip: "Dashboard",
              icon: "bx-grid-alt",
            },
          ],
        },
      ];

      const modulesMenu = baseMenu.find((item) => item.link === "/modules");
      if (modulesMenu && this.connections) {
        modulesMenu.child = this.connections.map((conn) => {
          return {
            href: `/modules/${conn.id}`,
            title: conn.name,
          };
        });
      }

      return baseMenu;
    },
  },
};
</script>