Free Trial Buy
    Your search did not match any results.
    Tabs

    Tabs

    The Tabs component allows you to create a tabbed UI to navigate between pages or views. You can create tab items in the items array, or populate tab items from a dataSource.

    Configure Overflow Behavior

    The Tabs component stretches to fit its container if you do not specify the component's width. When the total tab width exceeds the component’s width, navigation buttons appear. A user can click these buttons to scroll through the tabs. Use the showNavButtons and scrollByContent properties to control this behavior.

    Customize Tab Contents and Appearance

    You can initialize a tab’s contents (text, icons and badges) with values from underlying data objects. This example demonstrates this technique. You can also specify an item template (itemTemplate) to customize tabs.

    Process Tab Selection

    Specify the selectedIndex property to select a specific tab. Use the onItemClick function to process clicks on tabs.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.longTabsOptions = { dataSource: longtabs, }; $scope.scrolledTabsOptions = { dataSource: longtabs, width: 300, scrollByContent: true, showNavButtons: true, }; $scope.tabs = tabs; $scope.selectedTab = 0; $scope.$watch('selectedTab', (newValue) => { $scope.tabContent = tabs[newValue].content; }); });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="longtabs"> <div class="caption">Tabs</div> <div dx-tabs="longTabsOptions"></div> </div> <div id="scrolledtabs"> <div class="caption">Tabs with Overflow</div> <div dx-tabs="scrolledTabsOptions"></div> </div> <div id="tabs"> <div class="caption">API</div> <div dx-tabs="{ dataSource: tabs, bindingOptions: { selectedIndex: 'selectedTab' } }" > </div> <div class="content dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Selected index:</div> <div class="dx-field-value"> <div dx-select-box="{ dataSource: tabs, displayExpr: 'text', valueExpr: 'id', bindingOptions: { value: 'selectedTab' } }" > </div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Selected content:</div> <div class="dx-field-value-static left-aligned"> {{tabContent}} </div> </div> </div> </div> </div> </body> </html>
    .content { text-align: justify; margin-top: 25px; } #longtabs { margin-top: 20px; } #scrolledtabs { margin-top: 20px; } #tabs { margin-top: 60px; } .caption { font-size: 16px; padding-bottom: 3px; padding-left: 10px; } .left-aligned { text-align: left; }
    const tabs = [ { id: 0, text: 'user', icon: 'user', content: 'User tab content', }, { id: 1, text: 'comment', icon: 'comment', content: 'Comment tab content', }, { id: 2, text: 'find', icon: 'find', content: 'Find tab content', }, ]; const longtabs = [ { text: 'user' }, { text: 'analytics' }, { text: 'customers' }, { text: 'search' }, { text: 'favorites' }, { text: 'additional' }, { text: 'clients' }, { text: 'orders' }, { text: 'shipment' }, ];