diff --git a/ui/wolf.lib.html b/ui/wolf.lib.html
index 044320d..5dc2a1b 100644
--- a/ui/wolf.lib.html
+++ b/ui/wolf.lib.html
@@ -1,24 +1,14 @@
 <!-- Sample for now !! -->
-<wolf:define name="button">
-    <script>
-        define({
-            click: {
-                type: "event",
-                bindable: false,
-                set: attribute => {
-                    button.addEventListener("click", event => {
-
-                    })
-                }
-            },
-            icon: {
-                bindable: true,
-                bindTo: "icon"
-            }
-        })
-    </script>
-    <button wolf:id="button" class="icon"><i class="material-icons">{icon}</i></button>
-</wolf:define>
+<wolf:control id="button">
+    <attr bindable="false" default="">id</attr>
+    <attr>icon</attr>
+    <attr>text</attr>
+    <event>click</event>
+    <attr default="icon">class</attr>
+    <ui>
+        <button id="$id" class="$class"><i class="material-icons">$icon</i>$text</button>
+    </ui>
+</wolf:control>
 
 <!-- usage -->
 <wolf:button click="goAdd" icon="add" />
diff --git a/ui/wolf.ui.js b/ui/wolf.ui.js
index 518cbdb..5a9c19d 100644
--- a/ui/wolf.ui.js
+++ b/ui/wolf.ui.js
@@ -244,6 +244,7 @@
          * Create the base element needed for the extensible UI and control building system
          */
         function InitControlDefinitions() {
+            var controlGlobal = {}; //Global control space
 
             /**
              * Return the control instance attribute values
@@ -272,13 +273,14 @@
              */
             function renderControlDOM(ext) {
                 var tux = ext.customController.render();
-                var ux = [];
                 if (!tux)
                     return [];
                 if (!Array.isArray(tux))
                     tux = [tux];
+                var ux = [];
                 for (var i in tux)
                     ux = ux.concat(UI.instanceTemplate(tux[i], ext));
+                ext.customController.processDOM && ext.customController.processDOM(ux);
                 return ux;
             }
 
@@ -364,8 +366,6 @@
                         }
                     }
 
-                    // Children tempaltes
-
                     // Controller logics (new definition rendering) =============
                     controller.postInit = function (template) {
                         if (template.c && template.c.length && !allowChildren)
@@ -394,6 +394,8 @@
                                 return null;
                             },
                             childs: name => ext.getChildNodes(name),
+                            global: controlGlobal,
+                            parent: ext.parent,
                         }
                         var script = scriptFactory ? scriptFactory(API, K, D, UI, TOOLS) : {};
                         API.controller = script;
diff --git a/wolf.js b/wolf.js
index 4b779d6..2534c27 100644
--- a/wolf.js
+++ b/wolf.js
@@ -1510,6 +1510,9 @@
                         if (ctrl[eventName])
                             ctrl[eventName](lh.__elem, id, data);
                     }
+                    for (var i in nav.onChange) try {
+                        nav.onChange[i](id, data);
+                    } catch { };
                 });
 
                 if (navEntry.set) {
@@ -1636,6 +1639,7 @@
                 navTo: navTo,
                 processHash: processHash,
                 getCurrentNavigation: getCurrentNavigation,
+                onChange: []
             }
 
             navigatorController.registerNavigator(element, nav);