We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Tab Component for React

The tab control is a content panel that displays multiple pieces of content in a specific space, one at a time. Each piece of content is associated with its corresponding header.


Rendering

Item-based rendering

A tab can be rendered based on a JSON array collection of properties such as header and content. Data binding can be achieved by forming an array collection of items.

Template rendering

A tab can also be rendered with the given HTML elements. HTML markup can be formed based on templating elements using the template engine.


Responsive

The tab control adapts to the available space in two types of display modes: scrollable tab and popup menu.

JavaScript Tab Control with responsive mode by scrollable or popup


Scrollable Tab

Scrollable display mode displays the tab header items in a single line with horizontal scrolling enabled, when the items overflow to the available space. You can swipe over the tab header area to scroll.


The popup menu is another type of overflow mode in which the tab container holds the items that can be placed within the available space. The items that do not fit the viewing area are moved to the overflow popup container. You can view the overflow tab headers by clicking the popup icon.


Nested Tab

Allows you to add nested levels of tab within the parent tab.


Headers

Custom styles

Tab headers can be customized with CSS.

Tab position

Tab headers can be positioned either at the top or bottom.

Closable Tabs

Tab items can be removed dynamically using the close button. You can also control which tab item needs to have a close button and restrict it for certain tabs using custom classes.

Icons support

You can have icons with text or only icons in the tab header according to your preference. The position of the icons can also be changed to the left, right, top, and bottom.


Loading content

On-demand content loading

Tab content is loaded on-demand while selecting tab header, resulting in fast initial loading. Tab content already loaded will persist after moving to the next tab to prevent loading the content repeatedly.

Load content with AJAX

Allows you to load external content for tab content using an AJAX library.


Adjustable height

The tab content height can be defined based on the tallest panel height, parent height, or with the given content. This can be set by specifying the height adjust mode as “auto,” “fill,” and “content.”


Animation

Supports different types of built-in animation for the next/previous tab navigation. Animation behavior can also be customized.

JavaScript Tab Control with built-in animation on previous/next tab navigation


State persistence

During browser navigation, the selected state of the tab will not be lost.


Accessibility

  • Fully supports WAI-ARIA accessibility that helps the tab control be accessible by on-screen readers and assistive devices. 
  • Follows WAI-ARIA Best Practices for implementing keyboard interaction. 
  • Designed the UI element visuals such as foreground color, background color, line spacing, text and images based on WCG 2.0 standard.

Developer-friendly API

Developers can control the appearance and behavior of the tab control using a rich set of APIs.


45+ REACT COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.