Menu Item onClick - How Do I Link to a URL ?

[Bill]

<template>

  <div class = "headLine">

   <h1> pB Now </h1>

   <k-menu :items = "items" />

   

  </div>

</template>

<!-------------------------------------------------------------------->

<script lang="ts">

import { defineComponent } from 'vue';

import { Menu } from '@progress/kendo-vue-layout';

export default defineComponent({

  components: {

                'k-menu'          : Menu

  },

data: function() {

    return {

      items: [

                { text: "IT",

                  items: [

                            { text: "Network" },

                            { text: "Telephone",

                              items: [

                                      { text: "Extensions" },

                                      { text: "WirePorts"  }

                                    ],

                            },

                         ],

                },

                { text: "project mgt",

                  items: [

                            { text: "action items" },

                         ],

                },

                { text: "x",

                },

            ]

    }

  },

  name: 'HelloWorld',

  props: {

    msg: String,

  },

});

</script>

[Petar]

Hi, Bill.

To achieve the desired functionality of adding a link to a Menu item, you can use the 'url' property when defining the data items of the component.

Here is a demo from our documentation showing the property's usage. 

In the context of the scenario you shared, the items can be defined as follows:

items: [
  {
    text: 'IT',
    url: 'https://www.telerik.com',
    items: [
      { text: 'Network', url: 'https://www.google.com' },
      {
        text: 'Telephone',
        url: 'https://www.google.com',
        items: [
          { text: 'Extensions', url: '' },
          { text: 'WirePorts', url: '' },
        ],
      },
    ],
  },
  { text: 'project mgt', items: [{ text: 'action items' }], url: '' },
  { text: 'x', url: '' },
],

I hope the above details will help you achieve what you need in your application.

Regards,
Petar
Progress Telerik

[Bill]

Petar: 

Thanks very much.   I was able to get this to work ok.    The side-by-side text + url syntax is clean _ intuitive _ much appreciated _ and well-worthy of being added to the Kendo docs.  --Bill

[Petar]

Hi, Bill.

I am happy to hear that the suggested example has helped you achieve the desired functionality.