-A={tag:'ul',cls:'roo-navigation-bar'};return A;},onRender:function(ct,A){Roo.bootstrap.NavProgressBar.superclass.onRender.call(this,ct,A);if(this.bullets.length){Roo.each(this.bullets,function(b){this.addItem(b);},this);}},addItem:function(A){var B=new Roo.bootstrap.NavProgressItem(A);
-B.parentId=this.id;B.render(this.el,null);this.barItems.push(B);this.formatBullets();return B;},getActive:function(){var A=false;Roo.each(this.barItems,function(v){if(!v.isActive()){return;}A=v;return false;});return A;},setActiveItem:function(A){var B=false;
-Roo.each(this.barItems,function(v){if(v.rid==A.rid){return;}if(v.isActive()){v.setActive(false);B=v;}});A.setActive(true);this.fireEvent('changed',this,A,B);},getBarItem:function(A){var B=false;Roo.each(this.barItems,function(e){if(e.rid!=A){return;}B=e;return false;
-});return B;},indexOfItem:function(A){var B=false;Roo.each(this.barItems,function(v,i){if(v.rid!=A.rid){return;}B=i;return false});return B;},setActiveNext:function(){var i=this.indexOfItem(this.getActive());if(i>this.barItems.length){return;}this.setActiveItem(this.barItems[i+1]);
-},setActivePrev:function(){var i=this.indexOfItem(this.getActive());if(i<1){return;}this.setActiveItem(this.barItems[i-1]);},formatBullets:function(){if(!this.barItems.length){return;}var A=100/this.barItems.length;Roo.each(this.barItems,function(i){i.el.setStyle('width',A+'%');
-},this);}});
+A={tag:'div',cls:'roo-navigation-bar-group',cn:[{tag:'div',cls:'roo-navigation-top-bar'},{tag:'div',cls:'roo-navigation-bullets-bar',cn:[{tag:'ul',cls:'roo-navigation-bar'}]},{tag:'div',cls:'roo-navigation-bottom-bar'}]};return A;},initEvents:function(){},onRender:function(ct,A){Roo.bootstrap.NavProgressBar.superclass.onRender.call(this,ct,A);
+if(this.bullets.length){Roo.each(this.bullets,function(b){this.addItem(b);},this);}this.format();},addItem:function(A){var B=new Roo.bootstrap.NavProgressItem(A);B.parentId=this.id;B.render(this.el.select('.roo-navigation-bar',true).first(),null);if(A.html){var C=new Roo.bootstrap.Element({tag:'div',cls:'roo-navigation-bar-text'});
+var D=new Roo.bootstrap.Element({tag:'div',cls:'roo-navigation-bar-text'});C.onRender(this.el.select('.roo-navigation-top-bar',true).first(),null);D.onRender(this.el.select('.roo-navigation-bottom-bar',true).first(),null);var E=new Roo.bootstrap.Element({tag:'span',html:(typeof(A.position)!='undefined'&&A.position=='top')?A.html:''});
+var F=new Roo.bootstrap.Element({tag:'span',html:(typeof(A.position)!='undefined'&&A.position=='top')?'':A.html});E.onRender(C.el,null);F.onRender(D.el,null);B.topEl=C;B.bottomEl=D;}this.barItems.push(B);return B;},getActive:function(){var A=false;Roo.each(this.barItems,function(v){if(!v.isActive()){return;
+}A=v;return false;});return A;},setActiveItem:function(A){var B=false;Roo.each(this.barItems,function(v){if(v.rid==A.rid){return;}if(v.isActive()){v.setActive(false);B=v;}});A.setActive(true);this.fireEvent('changed',this,A,B);},getBarItem:function(A){var B=false;
+Roo.each(this.barItems,function(e){if(e.rid!=A){return;}B=e;return false;});return B;},indexOfItem:function(A){var B=false;Roo.each(this.barItems,function(v,i){if(v.rid!=A.rid){return;}B=i;return false});return B;},setActiveNext:function(){var i=this.indexOfItem(this.getActive());
+if(i>this.barItems.length){return;}this.setActiveItem(this.barItems[i+1]);},setActivePrev:function(){var i=this.indexOfItem(this.getActive());if(i<1){return;}this.setActiveItem(this.barItems[i-1]);},format:function(){if(!this.barItems.length){return;}var A=100/this.barItems.length;
+Roo.each(this.barItems,function(i){i.el.setStyle('width',A+'%');i.topEl.el.setStyle('width',A+'%');i.bottomEl.el.setStyle('width',A+'%');},this);}});