diff --git a/scm-webapp/src/main/webapp/resources/css/style.css b/scm-webapp/src/main/webapp/resources/css/style.css
index da258928ef..4617358dc1 100644
--- a/scm-webapp/src/main/webapp/resources/css/style.css
+++ b/scm-webapp/src/main/webapp/resources/css/style.css
@@ -101,4 +101,8 @@ a:visited {
 .scm-form-textarea-help-button {
   vertical-align: top;
   margin-left: 2px;
+}
+
+.scm-nav-item {
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/scm-webapp/src/main/webapp/resources/js/sonia.navigation.js b/scm-webapp/src/main/webapp/resources/js/sonia.navigation.js
index b16fb4b635..64ca17508f 100644
--- a/scm-webapp/src/main/webapp/resources/js/sonia.navigation.js
+++ b/scm-webapp/src/main/webapp/resources/js/sonia.navigation.js
@@ -33,97 +33,89 @@ Ext.ns('Sonia.navigation');
 
 Sonia.navigation.NavSection = Ext.extend(Ext.Panel, {
 
-  data: null,
+  links: null,
+  tpl: new Ext.XTemplate(
+        '<ul class="scm-nav-list">',
+        '<tpl for="links">',
+            '<li class="scm-nav-item">',
+                '<a id="{id}" class="scm-nav-item">{label}</a>',
+            '</li>',
+        '</tpl>',
+        '</ul>'
+      ),
+
 
   initComponent: function(){
-    if ( this.data == null ){
-      this.data = this.items;
+    if ( this.links == null ){
+      this.links = this.items;
     }
-    if ( this.data == null ){
-      this.data = [];
+    if ( this.links == null ){
+      this.links = [];
     }
+
+    Ext.each(this.links, function(link){
+      Ext.id( link );
+    });
+
     var config = {
       frame: true,
       collapsible:true,
-      style: 'margin: 5px',
-      listeners: {
-        afterrender: {
-          fn: this.renderMenu,
-          scope: this
-        }
-      }
+      style: 'margin: 5px'
     }
 
     Ext.apply(this, Ext.apply(this.initialConfig, config));
     Sonia.navigation.NavSection.superclass.initComponent.apply(this, arguments);
-
   },
 
-  onItemClick: function(e, t){
-    var target = Ext.get(t);
-    var id = target.id;
-    var prefix = this.id + '-nav-item-';
-    if ( id != null && id.indexOf(prefix) == 0 ){
-      var i = parseInt( id.substring( prefix.length ) );
-      var fn = this.data[i].fn;
-      if ( Ext.isFunction( fn ) ){
-        var scope = this.data[i].scope;
+  doAction: function(e, t){
+    console.debug( t );
+    e.stopEvent();
+    Ext.each(this.links, function(navItem){
+      if ( navItem.id == t.id && Ext.isFunction(navItem.fn) ){
+        var scope = navItem.scope;
         if ( Ext.isObject( scope )){
-          fn.call(scope);
+          navItem.fn.call(scope);
         } else {
-          fn();
+          navItem.fn();
         }
-      } else if ( debug ){
-        console.debug('fn at "' +  this.data[i].label + '" is not a function');
       }
-    }
+    });
+  },
+  
+  afterRender: function(){
+    Sonia.navigation.NavSection.superclass.afterRender.apply(this, arguments);
+
+    // create list items
+    this.tpl.overwrite(this.body, {
+        links: this.links
+    });
+
+    this.body.on('mousedown', this.doAction, this, {delegate:'a'});
+    this.body.on('click', Ext.emptyFn, null, {delegate:'a', preventDefault:true});
   },
 
-  renderMenu: function(){
-    if ( Ext.isArray( this.data ) && this.data.length > 0 ){
-      var links = [];
-      for ( var i=0; i<this.data.length; i++ ){
-        var item = this.data[i];
-        var link = {
-          tag: 'li',
-          cls: 'nav-item',
-          id: this.id + '-nav-item-' + i,
-          html: item.label,
-          style: 'cursor: pointer;'
-        };
-        links.push(link);
-      }
-      
-      var dh = Ext.DomHelper;
-      var list = dh.overwrite(this.body, {tag: 'ul', cls: 'nav-list'}, true);
-      dh.append(list, links);
-      list.on('click', this.onItemClick, this);
-    }
-  },
 
   addLink: function(link){
-    this.data.push(link);
-    this.renderMenu();
+    Ext.id(link);
+    this.links.push(link);
   },
 
   addLinks: function(links){
     if ( Ext.isArray(links) && links.length > 0 ){
       for ( var i=0; i<links.length; i++ ){
-        this.data.push(links[i]);
+        this.addLink(links[i]);
       }
-      this.renderMenu();
     } else {
       this.addLink(links);
     }
   },
 
   insertLink: function(pos, link){
-    this.data.splice(pos, 0, link);
-    this.renderMenu();
+    this.links.splice(pos, 0, link);
   },
 
   count: function(){
-    return this.data.length;
+    return this.links.length;
   }
 
 });
diff --git a/scm-webapp/src/main/webapp/resources/js/sonia.scm.js b/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
index a2fde3f998..4b764f12ac 100644
--- a/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
+++ b/scm-webapp/src/main/webapp/resources/js/sonia.scm.js
@@ -95,7 +95,7 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
     panel.addSection({
       id: 'navMain',
       title: this.sectionMainText,
-      items: [{
+      links: [{
         label: this.navRepositoriesText,
         fn: function(){
           this.mainTabPanel.setActiveTab('repositories');
@@ -109,7 +109,7 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
     if ( state.user.type == 'xml' && state.user.name != 'anonymous' ){
       securitySection = {
         title: this.sectionSecurityText,
-        items: [{
+        links: [{
           label: this.navChangePasswordText,
           fn: function(){
             new Sonia.action.ChangePasswordWindow().show();
@@ -123,7 +123,7 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
       panel.addSections([{
         id: 'navConfig',
         title: this.sectionConfigText,
-        items: [{
+        links: [{
           label: this.navGeneralConfigText,
           fn: function(){
             this.addTabPanel("scmConfig", "scmConfig", this.navGeneralConfigText);
@@ -147,18 +147,18 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
       if ( securitySection == null ){
         securitySection = {
           title: this.sectionSecurityText,
-          items: []
+          links: []
         }
       }
 
-      securitySection.items.push({
+      securitySection.links.push({
         label: this.navUsersText,
         fn: function(){
           this.addTabPanel('users', 'userPanel', this.navUsersText);
         },
         scope: this
       });
-      securitySection.items.push({
+      securitySection.links.push({
         label: this.navGroupsText,
         fn: function(){
           this.addTabPanel('groups', 'groupPanel', this.tabGroupsText);
@@ -175,7 +175,7 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
       panel.addSection({
         id: 'navLogin',
         title: this.sectionLoginText,
-        items: [{
+        links: [{
           label: this.sectionLoginText,
           fn: this.login,
           scope: this
@@ -185,7 +185,7 @@ Sonia.scm.Main = Ext.extend(Ext.util.Observable, {
       panel.addSection({
         id: 'navLogout',
         title: this.sectionLogoutText,
-        items: [{
+        links: [{
           label: this.navLogoutText,
           fn: this.logout,
           scope: this