Tab Panel

• Aug 07, 2026
• 3 minutes to read

TabPanel consists of the Tabs and MultiView components. The TabPanel automatically synchronizes the selected tab with the currently displayed view and vice versa.

Run Demo: TabPanel Read Tutorial

Getting Started

The TabPanel UI Control is based on the DevExtreme TabPanel component.

The following help topics explain how to add this control to your project:

• Add DevExtreme to a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

TabPanelBasics.cshtml

@(Html.DevExtreme().TabPanel()
    .Items(i => {
        i.Add().Title("Tab 1").Template(@<text><h2>View 1</h2></text>);
        i.Add().Title("Tab 2").Template(@<text><h2>View 2</h2></text>);
        i.Add().Title("Tab 3").Template(@<text><h2>View 3</h2></text>);
    })
)

TabPanelController.cs

using Microsoft.AspNetCore.Mvc;

namespace ASP_NET_Core.Controllers {
    public class TabPanelController : Controller {
        public IActionResult GettingStarted() {
            return View();
        }
    }
}

Built-in Capabilities and Configuration Guides

• Data Binding
  TabPanel supports different data source types and can update displayed items when data is modified.

  Run Demo: Drag and Drop

• Layout Configuration
  The component can arrange tabs horizontally or vertically. TabPanel also allows you to position tabs along any edge of the component: top, bottom, left, or right.

• Tab Configuration
  TabPanel supports tab icons, badges, and titles. The component allows you to specify the icon position to adjust the layout of tabs that contain icons. You can also configure the styling mode of active tabs, as well as disable tabs that users should not access.

• Accessibility and Keyboard Navigation
  TabPanel conforms to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports keyboard navigation and custom key handlers. TabPanel also ships with right-to-left (RTL) representation support.

• Customization
  You can use templates to define custom markup for individual TabPanel tabs or all tabs, and for individual panels or all panels. You can also enable or disable swipe gestures and transition animations to customize how users switch between tabs.

API

Server-Side API

Initialization

Call the TabPanel() method to create a TabPanel control. This action initializes a TabPanelBuilder instance. Use the instance methods to specify TabPanel options and event handlers.

Options

For a complete option list, see TabPanelBuilder Members. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the TabPanel options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme TabPanel options.

Methods

For a list of available methods, see DevExtreme TabPanel methods. For details on how to call methods, refer to the following help topic: Call Methods.

Demos

Run Demo: TabPanel