Tabbar UI widget

Tabbar is a JavaScript control that allows adding a bunch of tabs to your app to enable switching between the available views of the MultiView layout.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

If you’re going to build quite a big application and want to simplify the navigation process, you can divide it into several parts and use the Tab bar for getting access to them. Each tab can be equipped with a custom title, a 'Close' button or an icon. The Tabbar can be placed atop or under the MultiView widget. The Dynamic Tabbar changes automatically according to the width of the window. For example, tabs that don’t fit the screen can be moved to a pop-up window.

Adding and deleting tabs

The Tabbar API provides the possibility to change the number of tabs on the fly. Users can add or delete tabs in a single button click.

Dynamic Tabbar

You can define how the Tabbar control reacts on window resizing. Tabs can change their size when the window is minimized. The tabs that don’t fit the screen size can be pushed to a related pop-up window. In this case, an ellipsis icon will be displayed in the right part of the Tabbar, and users will be able to access the drop-down list of available tabs by clicking this icon. Webix allows you to adjust the minimal width of each tab or the popup as well as to set the number of items in the popup.

Buttons to close tabs

Each tab can be equipped with a little 'Cross' icon. Users can close a particular tab by clicking on it.

Show and hide tabs

Tabbar API provides methods that allow showing or hiding particular tabs.

Icons for Tabbar

To help users find the required tab quicker, you can add icons to each of them. Webix uses icons from the Font Awesome collection, and there is a plenty of icons to choose from.