dataSource Object|Array

The data source of the widget which is used to render its items. Can be a JSON object/Array 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

<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: "http://www.kendoui.com",               // 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>
In this article
Not finding the help you need?