< dhtmlxSuite 6.0 is Out - Large-Scale Update of the Whole JavaScript UI Library. Learn more

JavaScript Tab Control

dhtmlxTabbar is a modern and easy-to-use JavaScript/HTML5 tab control, which can be customized entirely to your needs.
Part of the Material-based Suite UI library.

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Full control with JavaScript API
  • Flexible customization
  • Vertical and horizontal tabs
  • 4 modes: top, bottom, right, left
  • Control over the size of tabs
  • Close button for each tab
  • Ability to show tabs without content
  • Ability to add and remove tabs

How to Create JavaScript Tabs with DHTMLX

Follow 5 simple steps to build a modern HTML5 tab control using JavaScript:
1
Create an HTML file
2
Include the tab bar js and css source files in the header
3
Add a container with an id - e.g. “tabbar_container” and outline the structure of your tabs
4
Initialize the widget with the dhx.Tabbar object constructor
5
Set the configuration options you need

Why Choose DHTMLX Tab Bar?

picture for features
Easy-to-use JavaScript tab control
dhtmlxTabbar provides convenient navigation through the content of web apps. The control has a quick and smooth initialization and adjustable structure. Developers can build tabs vertically or horizontally and place them at the top or bottom, on the right or left side of the page. It’s possible to add as many tabs as you need.
picture for features
Numerous configuration options and rich API
Due to the flexibility of JS API, you can easily fine-tune our JavaScript tab control according to your requirements. Various configuration options enable you to specify headers of tab cells, adjust their height and width, choose the most suitable location on the page, and equip each tab with close buttons if needed. Moreover, there is an option to build a tab bar without any content.
picture for features
Diverse customization possibilities
The appearance of our JavaScript/HTML5 tab control is based on Material design. However, its look and feel can be customized with little to no effort. In order to style the DHTMLX tab bar, you only need to add new CSS classes and specify the settings to achieve the desired result. Thus, you can change the background, borders, border radius, and other elements of tabs on the fly.
Wrappers for Angular, React, and Vue.js
With the growing popularity of Angular, React, and Vue.js, developers need a straightforward way of integrating JavaScript controls into web apps based on these frameworks. For that reason, we’ve prepared special wrappers to assist you in using our JavaScript tabs. Get a 30-day trial version of the tab bar and other UI widgets to try integrating them in your projects.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

demo-screenshot

File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All JavaScript UI components are part of the dhtmlxSuite library. You can download the free trial version of Suite and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

PRO features

Need help with dhtmlxTabbar integration into your app? Contact us