All docs
V21.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Tabs - Overview

The Tabs is a tab strip used to switch between pages or views. This UI component is included in the TabPanel UI component, but you can use the Tabs separately as well.

View Demo

The following code adds the Tabs UI component to your page. One of the tabs has an icon, another has a badge.

jQuery
JavaScript
$(function() {
    $("#tabsContainer").dxTabs({
        items: [
            { text: "User", icon: 'user' },
            { text: "Comment", badge: "New" },
            { text: "Find" }
        ]
    });
});
Angular
HTML
TypeScript
<dx-tabs
    [items]="tabs">
</dx-tabs>
import { DxTabsModule } from "devextreme-angular";
// ...
export class AppComponent {
    tabs = [
        { text: "User", icon: 'user' },
        { text: "Comment", badge: "New" },
        { text: "Find" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTabsModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxTabs
        :items="tabs" />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxTabs from "devextreme-vue/tabs";

export default {
    components: {
        DxTabs
    },
    data() {
        return {
            tabs: [
                { text: "User", icon: 'user' },
                { text: "Comment", badge: "New" },
                { text: "Find" }
            ]
        };
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const tabs = [
    { text: "User", icon: 'user' },
    { text: "Comment", badge: "New" },
    { text: "Find" }
];

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

export default App;

Note that field names in these data source items are conventional. This provides a default appearance for tabs, which can be customized later.

See Also