DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Tab Panel - Overview

The TabPanel UI component includes both the Tabs and MultiView components. The TabPanel automatically synchronizes the selected tab with the currently displayed view (and vice versa).

To get started with the DevExtreme TabPanel component, refer to the following step-by-step tutorial: Getting Started with TabPanel.

DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the TabPanel features used.
To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

Generate Similar Tabs Based on a Data Source

To generate similar tabs and views, bind the TabPanel to data (using the items or dataSource property). Both these properties can work with local arrays, but dataSource also accepts a DataSource object. You can use this object if you need to process the local array or fetch the array from a remote data source. In this demo, the dataSource property is set to a local array.

Each object in the items[] or dataSource array can contain predefined fields, such as title or icon (see the items[] section for the full list). The TabPanel automatically recognizes these fields and creates the default tab and view appearance based on them.

Customize Tab Contents and Appearance

You can initialize tab contents (text, icons and badges) with values from underlying data objects.

Use the drop-down editors on the right to change tab position, styling mode, and icon position.