The TabPanel is a widget consisting of the Tabs and MultiView widgets. It automatically synchronizes the selected tab with the currently displayed view and vice versa.

View Demo

The following code adds a simple TabPanel to your page.

jQuery

JavaScript

HTML

$(function() {
    $('#tabPanelContainer').dxTabPanel({
        items: [{
            title: 'Info',
            text: 'This is Info Tab'
        }, {
            title: 'Contacts',
            text: 'This is Contacts Tab'
        }, {
            title: 'Address',
            text: 'This is Address Tab'
        }]
    });
});

<div id="tabPanelContainer"></div>

Angular

HTML

TypeScript

<dx-tab-panel
    [items]="tabPanelItems">
</dx-tab-panel>

import { DxTabPanelModule } from 'devextreme-angular';
// ...
export class AppComponent {
    tabPanelItems = [{
        title: 'Info',
        text: 'This is Info Tab'
    }, {
        title: 'Contacts',
        text: 'This is Contacts Tab'
    }, {
        title: 'Address',
        text: 'This is Address Tab'
    }];
}
@NgModule({
    imports: [
        // ...
        DxTabPanelModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxTabPanel
        :items="tabPanelItems" />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTabPanel from 'devextreme-vue/tab-panel';

export default {
    components: {
        DxTabPanel
    },
    data() {
        return {
            tabPanelItems: [{
                title: 'Info',
                text: 'This is Info Tab'
            }, {
                title: 'Contacts',
                text: 'This is Contacts Tab'
            }, {
                title: 'Address',
                text: 'This is Address Tab'
            }]
        };
    }
};
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TabPanel from 'devextreme-react/tab-panel';

const tabPanelItems = [{
    title: 'Info',
    text: 'This is Info Tab'
}, {
    title: 'Contacts',
    text: 'This is Contacts Tab'
}, {
    title: 'Address',
    text: 'This is Address Tab'
}];

class App extends React.Component {
    render() {
        return (
            <TabPanel
                items={tabPanelItems}
            />
        );
    }
}

export default App;

Note that field names in these data source items are conventional. This provides a default appearance for tabs and views; that is, title goes to the tab, and text goes to the view. But more often, data source objects have fields with different names. For correct rendering in these cases, specify a custom template.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Overview

jQuery

Angular

Vue

React

See Also