JavaScript/jQuery Menu - Customize Item Appearance

For a minor customization of Menu items, you can define specific fields in item data objects. For example, the following code generates two root items with two drop-down menu items each. The root items are supplied with icons.

JavaScript
HTML
  • var menuItems = [{
  • text: 'Upload', icon: 'upload',
  • items: [
  • { text: 'From your computer' },
  • { text: 'From a cloud service' }
  • ]
  • }, {
  • text: 'Share', icon: 'message',
  • items: [
  • { text: 'Log in with Facebook' },
  • { text: 'Log in with Twitter' }
  • ]
  • }];
  •  
  • $(function() {
  • $("#menuContainer").dxMenu({
  • items: menuItems
  • });
  • });
  • <div id="menuContainer"></div>

If you need a more flexible solution, define an itemTemplate.

JavaScript
HTML
  • var menuItems = [{
  • text: 'Upload',
  • items: [
  • { text: 'From your computer' },
  • { text: 'From a cloud service' }
  • ]
  • }, {
  • text: 'Share',
  • items: [
  • { text: 'Log in with Facebook' },
  • { text: 'Log in with Twitter' }
  • ]
  • }];
  •  
  • $(function() {
  • $("#menuContainer").dxMenu({
  • items: menuItems,
  • itemTemplate: function(itemData, itemIndex, itemElement) {
  • itemElement.append("<i>" + itemData.text + "</i>");
  • }
  • });
  • });
  • <div id="menuContainer"></div>

You can also customize an individual menu item. For this purpose, declare a template for this item as a script and pass its id to the template field of the item's data object.

HTML
JavaScript
  • <script id="individualTemplate" type="text/html">
  • <i>Upload</i>
  • </script>
  • var menuItems = [{
  • text: "Upload", icon: "upload",
  • template: $("#individualTemplate"),
  • items: [
  • {
  • template: function() {
  • return $("<i>").text("From your computer");
  • }
  • }
  • ]
  • }];
  •  
  • $(function() {
  • $("#menuContainer").dxMenu({
  • items: menuItems
  • });
  • });
See Also