Structure of tabs

The structure of Tabbar should be defined during initialization of the component. It is set within the views property. Each tab is an object with attributes, which are:

  • tab - the name of a tab
  • tabCss - the name of the CSS class used for a tab
  • css - the name of the CSS class used for a cell
  • header - the header of a cell
var tabbar = new dhx.Tabbar("tabbar_container", {
        { tab: "left", css:"panel flex", header:"Left"},
        { tab: "west", css:"panel flex", header:"West"},
        { tab: "east", css:"panel flex", header:"East"},
        { tab: "right", css:"panel flex", header:"Right" }

Size of tabs

dhtmlxTabbar allows you to control the height and width of tabs with the help of appropriate configuration options - tabWidth and tabHeight. By default, they are set to 150px and 45px, correspondingly. This is how you can change the default settings:

var tabbar = new dhx.Tabbar("tabbar_container", {
    tabWidth: 120,
    tabHeight: 50

Position of tabbar

When initialized with default settings, Tabbar is located at the top of a page (?). You can locate dhtmlxTabbar at any desired side of your application by using any other value of the mode property. Besides "top", it can also take "bottom","left" or "right" values. e.g.:

var tabbar = new dhx.Tabbar("tabbar_container", {
    mode: "bottom"

Close buttons for tabs

You can equip each Tabbar tab with a close button to make it easily closable via interface. To enable close buttons in tabs, make use of the closeButtons configuration property:

var tabbar = new dhx.Tabbar("tabbar_container", {

Tabs without content

It is possible to render a tabbar without any content. Use the noContent option for this purpose:

var tabbar = new dhx.Tabbar("tabbar_container", {
Back to top