dataSource Object|Array|kendo.data.HierarchicalDataSource

The data source of the widget which is used to render its items. Can be a JSON object/Arra/kendo.data.HierarchicalDataSource that contains an item or an Array of items to be rendered. Refer to the example below for a list of the supported properties.

Example - using a local array

<ul id="menu"></ul>
<script>
  var imgUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png";
  $(document).ready(function() {
    $("#menu").kendoMenu({
      dataSource:
      [{
        text: "Item 1",
        cssClass: "myClass",                         // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
        url: "https://www.telerik.com/kendo-ui",               // Link URL if navigation is needed, optional.
        attr: {
          custom: 'value',                            // Add attributes with specified values
          other: 'value'
        }
      },
       {
         text: "<b>Item 2</b>",
         encoded: false,                              // Allows use of HTML for item text
         content: "text",                              // content within an item
         contentAttr: {
           style: 'border: 1px solid red; padding: 2px;', // Add attributes to the content container
           custom: 'value'
         }
       },
       {
         text: "Item 3",
         imageAttr: {                                                                   // Add additional image attributes
           alt: 'Image',
           height: '25px',
           width: '25px'
         },
         imageUrl: imgUrl,                            // Item image URL, optional.
         items: [{                                    // Sub item collection
           text: "Sub Item 1"
         },
                 {
                   text: "Sub Item 2"
                 }]
       },
       {
         text: "Item 4",
         spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
       },
       {
         text: "Item 5",
         select: function(e) {                        // Item select event handler, optional
            // e.sender - returns reference to the Kendo Menu widget
            // e.target - returns the clicked element. Typically, the span.k-link element.

            // handle event
         }
       }]
    })
  });
</script>

Example - using kendo.data.HierarchicalDataSource

<ul id="menu"></ul>
<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Employees",
                dataType: "jsonp"
            }
        },
        schema: {
            model: {
                id: "EmployeeId",
                hasChildren: "HasEmployees"
            }
        }
    });

    var menu =  $("#menu").kendoMenu({
        dataTextField: "FullName",
        dataSource: dataSource
    })
</script>