Dynamic Tabbar

Tabbar can take the following modifications:

  • Tabbar may have non-static tab width and quantity that are both changed dynamically on window resizing;
  • Tabs can be pushed to a related popup while retaining their default behavior.

Related sample:  Dynamic Tabbar in Multiview

Everything is done fully automatically: when the size of a window changes, tabs are minimized and then pushed to a popup. So the following code is enough:

Default tabbar

{ view:"tabbar", options:["First tab", "Second Tab"] }


  • The minimal width of each tab is 100px by default. It is common for all the tabs of this tabbar and can be changed with the help of tabMinWidth property;
  • The minimal width of an area to the right that triggers a popup is 40px. By default an ellipsis icon is used. Both parameters can be changed:
    • tabMoreWidth sets the width of this area;
    • moreTemplate sets other icon/text/HTML of this area. Either function or string can be used;
  • The width of the popup is 200px by default. It can be changed with the popupWidth property;
  • The default number of list items in the popup is 7. It can be changed with the yCount parameter. If there are more items in the popup, scroll will appear.
  • By default list items feature the #value# template. A different template can be set by the popupTemplate property.

Customized tabbar

    moreTemplate:"Show more", 
    //or moreTemplate:function(){ return "Show more" },
        {id:1, value:"First Tab", text:"Some text for first tab"},
        {id:2, value:"Second Tab", text:"Some text for second tab"}

Note that options config for tabbar must include the value property, otherwise it will render id on tabs and throw an error. Still, there can be other properties rendered in a popup list with popupTemplate.

More info about Webix data templates can be found in the dedicated documentation article.

Back to top