We can Implement the menu in Kendo UI using MVVM Pattern just in two step.
Step 1: Create an HTML page using any text editor in my case I named it as KenodMenu.html and write the following code in it.
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Untitled</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
  11. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  12. <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
  14. <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
  15. </head>
  17. <body>
  18. <div id="example" class="container">
  19. <div class="row">
  20. <ul data-role="menu" style="width: 50%;">
  21. <li> Home
  22. <ul>
  23. <li> Furniture
  24. <ul>
  25. <!-- moving the UL to the next line will cause an IE7 problem -->
  26. <li>Sofas</li>
  27. <li>Beds</li>
  28. </ul>
  29. </li>
  30. </ul>
  31. </li>
  32. <li> Electronics
  33. <ul>
  34. <li> Mobiles </li>
  35. <li> Laptops </li>
  36. </ul>
  37. </li>
  38. </ul>
  39. </div>
  40. </div>
  41. </body>
  43. </html>
The data-role property is used to set the menu
JavaScript with MVVM model
  1. var viewModel = kendo.observable({
  2. isVisible: true,
  4. });
  5. kendo.bind($("#example"), viewModel);
From the above script we are going to enable the Kendo Menu.
Result in Browser