TabStrip

TabStrip Overview

A TabStrip component is a UI element that organizes content into multiple tabs, allowing users to switch between different views or sections of content within a single container. This component is useful for creating clean, navigable interfaces where space is limited, by consolidating related information into tabbed sections that are easily accessible. Each tab acts as a clickable header, with the content area below updating to show the corresponding information when a tab is selected. TabStrip components are widely used in applications ranging from web browsers to complex business dashboards to enhance usability and the organization of information.

Live Demo

Appearance

TabStrips provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI TabStrip, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

Anatomy

The anatomy of the TabStrip summarizes the visual and functional elements of the component. The main elements include tabstrip items and a content panel.

The next image shows the anatomy of a TabStripand includes the following elements:

1. Active tab
2. Inactive tabs
3. Content panel
4. Content

Position

Depending on the tabs position, the Telerik and Kendo UI TabStrip can be any of the following types:

• Top (default)
• Bottom
• Left
• Right

1. Top (default)
2. Bottom
3. Left
4. Right

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular TabStripFind more information about the Kendo UI for Angular TabStrip in the official product documentation of the component.

Telerik UI for Blazor TabStripFind more information about the Telerik UI for Blazor TabStrip in the official product documentation of the component.

Kendo UI for jQuery TabStripFind more information about the Kendo UI for jQuery TabStrip in the official product documentation of the component.

KendoReact TabStripFind more information about the KendoReact TabStrip in the official product documentation of the component.

Kendo UI for Vue TabStripFind more information about the Kendo UI for Vue TabStrip in the official product documentation of the component.

Telerik UI for ASP.NET Core TabStripFind more information about the Telerik UI for ASP.NET Core TabStrip component.

Telerik UI for ASP.NET MVC TabStripFind more information about the Telerik UI for ASP.NET MVC TabStrip component.