Open URL in a new window when clicking on a Kendo UI Vue Native Menu item

Environment

Product Version	7.0.0
Product	Progress® Kendo UI for Vue Native

Description

I want to open the URL from a Menu item in a new window.

Solution

To customize the default behavior of the Kendo Vue Menu and how it handles the URL set in a MenuItem, define a custom linkRender slot for the Menu. Within the custom linkRender, render an <a> element for menu items, bind its :href to props.item.url, and add a @click.stop.prevent handler that calls window.open(props.item.url, '_blank') to manually open the link in a new window. By handling the anchor element this way, you override the Menu’s default navigation and ensure that the links always open in a new tab under your control.

The following example demonstrates this approach in action:

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Vue Menu Documentation
• Kendo UI for Vue Menu API Reference