< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and 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
  • Manipulating separate 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
  • Accessibility support

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:

Other Suite Components

demo-screenshot

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

Try All UI Widgets for Free

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

30 days of free evaluation

Official technical support

Full toolkit of 23 components

PRO features

Need help with dhtmlxTabbar integration into your app? Contact us