Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-tabs.

Create Predefined Tabs

You can create tab items in the items array, or populate tab items from a dataSource. This tutorial uses the first technique. To see how to use the dataSource, refer to the following demo: Tabs Overview Demo.

You can use predefined item features to customize the items. The code below creates a Tabs component with a fixed width and populates it with three items. The first item has a badge. The second item uses text and is disabled. The third item has an icon.

jQuery

index.js

index.html

$(function() {
    $("#tabs").dxTabs({
        width: 300,
        items: [
            {
                badge: 'First'
            },
            {
                text: 'Second',
                disabled: true                
            },
            {
                icon: 'favorites',
                text: 'Third'                
            }
        ]
    });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_23_2/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_23_2/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div id="tabs"></div>
    </body>
</html>

Angular

app.component.html

app.module.ts

<dx-tabs
    [width]="300"
>
    <dxi-item 
        badge="First"
    >
    </dxi-item>
    <dxi-item 
        text="Second"
        [disabled]="true"
    >
    </dxi-item>
    <dxi-item 
        text="Third"
        icon="favorites"
    >
    </dxi-item>
</dx-tabs>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTabsModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTabsModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <dxTabs
        :width="300"
    >
        <dxItem 
            badge="First"
        >
        </dxItem>
        <dxItem 
            text="Second"
            :disabled="true" 
        >
        </dxItem>
        <dxItem 
            text="Third"
            icon="favorites"
        >
        </dxItem>
    </dxTabs>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxTabs, { DxItem } from 'devextreme-vue/tabs';

export default {
    components: {
        DxTabs
        DxItem
    },
    data() {
        return {

        }
    },
    methods: {    

    }
}
</script>

React

App.js

import React from 'react';
import Tabs, { Item } from 'devextreme-react/tabs';

import 'devextreme/dist/css/dx.light.css';

function App() {
    return (
        <Tabs
            width={300}
        >
            <Item
                badge="First"
            >
            </Item>
            <Item
                text="Second"
                disabled={true}
            >
            </Item>
            <Item
                text="Third"
                icon="favorites"
            >
            </Item>
        </Tabs>
    );
}

export default App;

Create Custom Tabs

jQuery

Use an itemTemplate to apply customization to all items. To customize an individual item, specify the template property of the item.

The following code adds a fourth custom tab:

index.js

index.css

$(function() {
    $("#tabs").dxTabs({
        items: [
            // ...
            {   
                template: '<div id="fourth">Fourth</div>'
            },
        ]
    });
});

#fourth {
    text-align: center;
    font-style: italic;
    color: #F05B41;
}

Angular

Use an itemTemplate to apply customization to all items. To customize an individual item, specify a custom template.

The following code adds a fourth custom tab:

app.component.html

app.component.css

<dx-tabs>
    <!-- ... -->
    <dxi-item>
        <div *dxTemplate>
            <div id="fourth">Fourth</div>
        </div>
    </dxi-item>
</dx-tabs>

#fourth {
    text-align: center;
    font-style: italic;
    color: #F05B41;
}

Vue

Use an itemTemplate to apply customization to all items. To customize an individual item, specify a custom template.

The following code adds a fourth custom tab:

App.vue

<template>
    <DxTabs>
        <!-- ... -->
        <dxItem>
            <div id="fourth">Fourth</div>
        </dxItem>
    </DxTabs>
</template>

<script>
// ...
</script>

<style>
    #fourth {
        text-align: center;
        font-style: italic;
        color: #F05B41;
    }
</style>

React

Use an itemRender to apply customization to all items. To customize an individual item, specify the render property of the item.

The following code adds a fourth custom tab:

App.js

index.css

// ...
const renderFourth = () => {
    return <div id="fourth">Fourth</div>;
}

function App() {
    return (
        <Tabs>
            <!-- ... -->
            <Item
                render={renderFourth}
            >
            </Item>
        </Tabs>
    );
}

export default App;

#fourth {
    text-align: center;
    font-style: italic;
    color: #F05B41;
}

Specify Selection Mode

Users can select Tabs component items in two different modes: 'single' (default) or 'multiple'. You can use the selectionMode property to change the mode. To preselect or to select an item programmatically, pass its index in the data source array to the selectedIndex property. As an alternative, you can use the selectedItem (for 'single' selection mode) or selectedItems (for 'multiple' selection mode) properties.

The following code sets the selectionMode to 'multiple' and preselects the third tab:

jQuery

index.js

$(function() {
    $("#tabs").dxTabs({
        // ...
        selectedIndex: 2,
        selectionMode: 'multiple'
    });
});

Angular

app.component.html

<dx-tabs ...
    [selectedIndex]="2"
    selectionMode="multiple"
>
    <!-- ... -->
</dx-tabs>

Vue

App.vue

<template>
    <dxTabs
        :selected-index="2"
        selection-mode="multiple"
    >
        <!-- ... -->
    </dxTabs>
</template>

<script>
// ...
</script>

<style>
/* ... */
</style>

React

App.js

// ...

function App() {
    return (
        <Tabs
            selectedIndex={2}
            selectionMode="multiple"
        >
            <!-- ... -->
        </Tabs>
    );
}

export default App;

Handle Tab Click

Use the onItemClick function to process clicks on tabs.

jQuery

index.js

$(function() {
    function showMessage(id) {
        DevExpress.ui.notify(
            {
                message: `Tab ${id} has been clicked!`,
                width: 250
            },
            'info',
            500
        );
    };

    $("#tabs").dxTabs({
        onItemClick(e) {
            showMessage(e.itemIndex + 1);
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-tabs
    (onItemClick)="onItemClick($event)"
>
    <!-- ... -->
</dx-tabs>

import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    onItemClick(e: any) {
        showMessage(e.itemIndex + 1);
    }
}

function showMessage(id: number) {
    notify(
        {
            message: `Tab ${id} has been clicked!`,
            width: 250
        },
        'info',
        500
    );
};

Vue

App.vue

<template>
    <dxTabs
        @item-click="onItemClick"
    >
        <!-- ... -->
    </dxTabs>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxTabs, { DxItem } from 'devextreme-vue/tabs';
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxTabs
        DxItem
    },
    data() {
        return {

        }
    },
    methods: {    
        showMessage(id) {
            notify(
                {
                    message: `Tab ${id} has been clicked!`,
                    width: 250
                },
                'info',
                500
            );
        },
        onItemClick(e) {
            this.showMessage(e.itemIndex + 1);
        }
    }
}
</script>

React

App.js

import React from 'react';
import Tabs, { Item } from 'devextreme-react/tabs';
import notify from 'devextreme/ui/notify';

import 'devextreme/dist/css/dx.light.css';

const showMessage = (id) => {
    notify(
        {
            message: `Tab ${id} has been clicked!`,
            width: 250
        },
        'info',
        500
    );
}

const onItemClick = (e) => {
    showMessage(e.itemIndex + 1);
}

function App() {
    return (
        <Tabs
            onItemClick={onItemClick}
        >
            <!-- ... -->
        </Tabs>
    );
}

export default App;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

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

JavaScript/jQuery Tabs - Getting Started

jQuery

Angular

Vue

React

Create Predefined Tabs

jQuery

Angular

Vue

React

Create Custom Tabs

jQuery

Angular

Vue

React

Specify Selection Mode

jQuery

Angular

Vue

React

Handle Tab Click

jQuery

Angular

Vue

React