diff --git a/HISTORY.md b/HISTORY.md
index 1fb8337..3fa3894 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -3,6 +3,11 @@
 https://github.com/josdejong/jsoneditor
 
 
+## not yet released, version 5.7.0
+
+- Implemented support for template items. Thanks @israelito3000.
+
+
 ## 2017-04-15, version 5.6.0
 
 - Implemented readonly option for modes `text` and `code.`
diff --git a/examples/10_templates.html b/examples/10_templates.html
index 2e7f9de..3e45f90 100644
--- a/examples/10_templates.html
+++ b/examples/10_templates.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>JSONEditor | JSON schema validation</title>
+  <title>JSONEditor | Item templates</title>
 
   <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
   <script src="../dist/jsoneditor.js"></script>
@@ -19,33 +19,42 @@
   </style>
 </head>
 <body>
-<h1>JSON schema validation</h1>
+<h1>Item templates</h1>
 <p>
-  This example demonstrates JSON schema validation. The JSON object in this example must contain properties <code>firstName</code> and <code>lastName</code>, can can optionally have a property <code>age</code> which must be a positive integer.
-</p>
-<p>
-  See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
+  Using item templates, the options in the context menu under "insert" and "append" can be extended with extra options, containing a domain specific template like a "Person", "Contact", "Order", "Address", etc.
 </p>
 
 <div id="jsoneditor"></div>
 
 <script>
 
-  var json = {
-    firstName: 'John',
-    lastName: 'Doe',
-    gender: null,
-    age: 28
-  };
+  var json = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+      age: 28
+    }
+  ];
 
   var options = {
       templates: [
           {
-              "menu": "Special Node",
-              "name": "SpecialNode",
-              "data": {
-                  "field1": "value1",
-                  "field2": "value2"
+              menu: 'Person',
+              name: 'PersonTemplate',
+              data: {
+                  'firstName': 'John',
+                  'lastName': 'Do',
+                  'age': 28
+              }
+          },
+          {
+              menu: 'Address',
+              name: 'AddressTemplate',
+              data: {
+                  'street': "",
+                  'city': "",
+                  'state': "",
+                  'ZIP code': ""
               }
           }
       ]
@@ -54,6 +63,7 @@
   // create the editor
   var container = document.getElementById('jsoneditor');
   var editor = new JSONEditor(container, options, json);
+  editor.expandAll();
 </script>
 </body>
 </html>
diff --git a/src/js/ContextMenu.js b/src/js/ContextMenu.js
index 216a1bc..6bb1b1f 100644
--- a/src/js/ContextMenu.js
+++ b/src/js/ContextMenu.js
@@ -321,7 +321,11 @@ ContextMenu.prototype._onExpandItem = function (domItem) {
     var height = ul.clientHeight; // force a reflow in Firefox
     setTimeout(function () {
       if (me.expandedItem == domItem) {
-        ul.style.height = (ul.childNodes.length * 24) + 'px';
+        var childsHeight = 0;
+        for (var i = 0; i < ul.childNodes.length; i++) {
+          childsHeight += ul.childNodes[i].clientHeight;
+        }
+        ul.style.height = childsHeight + 'px';
         ul.style.padding = '5px 10px';
       }
     }, 0);
