Open a New Tab on Menu Item Click

Environment

Product Menu for ProgressĀ® Kendo UIĀ®
Product Version 2019.2.514

Description

How can I navigate to a new browser tab when a user clicks on a Kendo UI Menu item?

Solution

To open a new tab with a specific URL when a user clicks on a Menu item, use either of the following approaches:

  • Utilize the select event to determine if the item has a target attribute. If it does, use window.open method.

    ```javascript
        select: function(e){
          if(e.item.getAttribute("target")){
            e.preventDefault();
    
            //use window.open() to open a new browser window
            window.open($(e.item).find("a.k-link").first().attr("href"), e.item.getAttribute("target"));
          }
        },
    ```
    
    The following example demonstrates the full implementation of the suggested approach.
    
    ```dojo
        <ul id="menu"></ul>
        <script>
          $(document).ready(function() {
            $("#menu").kendoMenu({
              select: function(e){
                if(e.item.getAttribute("target")){
                  e.preventDefault();
    
                  // Use window.open() to open a new browser window.
                  window.open($(e.item).find("a.k-link").first().attr("href"), e.item.getAttribute("target"));
                }
              },
              dataSource:
              [{
                text: "Search Engines",
                cssClass: "myClass",                          
                items: [{                                    
                  text: "Google",
                  url: "https://www.google.com",
                  attr: {
                    target: "_blank"
                  }
                },{
                  text: "Bing",
                  url: "https://www.bing.com",
                  attr: {
                    target: "_blank"
                  }
                }]
              },
              ]
            });
          });
        </script>
    ```
    
  • During the open event, determine if the target attribute was set to "_blank" for the menu item. If not, find the k-link class and set the target.

    ```javascript
          open: function(e) {
            var hasTarget = $(e.sender.element).find(".k-link").attr("target");
            if(hasTarget != "_blank"){
              $(e.sender.element).find(".k-link").attr("target", "_blank");  
            }
          },
    ```
    
    The following example demonstrates the full implementation of the suggested approach.
    
    ```dojo
      <ul id="menu"></ul>
      <script>
        $(document).ready(function() {
          $("#menu").kendoMenu({
            open: function(e) {
              var hasTarget = $(e.sender.element).find(".k-link").attr("target");
              if(hasTarget != "_blank"){
                $(e.sender.element).find(".k-link").attr("target", "_blank");  
              }
            },
            dataSource:
            [{
              text: "Search Engines",
              cssClass: "myClass",                          
              items: [{                                    
                text: "Google",
                url: "https://www.google.com",
              },{
                text: "Bing",
                url: "https://www.bing.com",
              }]
            },
            ]
          });
        });
      </script>
    ```
    

See Also

In this article
Not finding the help you need? Improve this article