---
title: Overview
position: 1
seo_title: Overview of the TabStrip Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  TabStrip component and its types, check out the extensive set of available
  options in its live demo, and change its appearance by setting the variant of
  the component.
---
## 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

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/tabstrip/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/tabstrip/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/tabstrip/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/tabstrip"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/tabstrip"}],"demo":"components/tabstrip/overview"}'></LiveDemo>

### 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 tabs and a content panel.

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

<BlueprintImage data='{"description":"","labels":[{"text":"Active tab"},{"text":"Inactive tabs"},{"text":"Content panel"},{"text":"Content"}]}'>![A Telerik and Kendo UI TabStrip component](images/components-tabstrip-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI TabStrip component")</BlueprintImage>

#### Variants

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

* Top (default)
* Bottom
* Left
* Right

<BlueprintImage data='{"description":"","labels":[{"text":"Top (default)"},{"text":"Bottom"},{"text":"Left"},{"text":"Right"}]}'>![A Telerik and Kendo UI TabStrip component position variants](images/components-tabstrip-overview-orientation.png "Position variants of a Telerik and Kendo UI TabStrip component")</BlueprintImage>

### Framework-Specific Documentation

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

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular TabStrip","description":"Find more information about the Kendo UI for Angular TabStrip in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor TabStrip","description":"Find more information about the Telerik UI for Blazor TabStrip in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/tabstrip/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery TabStrip","description":"Find more information about the Kendo UI for jQuery TabStrip in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/tabstrip/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact TabStrip","description":"Find more information about the KendoReact TabStrip in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/tabstrip/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue TabStrip","description":"Find more information about the Kendo UI for Vue TabStrip in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core TabStrip","description":"Find more information about the Telerik UI for ASP.NET Core TabStrip component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/tabstrip/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC TabStrip","description":"Find more information about the Telerik UI for ASP.NET MVC TabStrip component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/tabstrip/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>
</Wrap>