---
title: Overview
position: 1
seo_title: Overview of the Splitter Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Splitter component, its various states and types, explore the extensive set of
  available options in its live demo.
---
## Splitter Overview

The Splitter component is a versatile UI element that allows users to dynamically resize and adjust adjacent panes in web or application interfaces. By dragging the split bars or using their collapse and expand functions, users can customize the size and visibility of the panes, focusing on the information that concerns them the most. Whether used as a high-level layout component or for specific tasks like image comparison, the Splitter enhances user experience by providing adaptable and interactive content organization.

### Live Demo

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

### Appearance

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

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

#### States

Depending on the action you want to imply through its appearance, the split bar of the Telerik and Kendo UI Splitter can acquire the following states which you can set by using the following classes:

* A split bar in its normal state appears usable and clickable.
* `k-hover`&mdash;The hover state of the split bar is triggered when the user moves the cursor over it.
* `k-focus`&mdash;The focus state is triggered after the split bar has been spotlighted with the mouse or the keyboard, meaning that the split bar is active and the user is interacting with it.
* `k-disabled`&mdash;The disabled state of the split bar indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.

#### Anatomy

The anatomy of the Splitter summarizes the elements of the component and includes: 

<BlueprintImage data='{"description":"","labels":[{"text":"Resizable pane"},{"text":"Resizable and collapsible pane"},{"text":"Split bar"},{"text":"Resize handle"},{"text":"Expand or collapse indicator"}]}'>![Anatomy and elements of the Telerik and Kendo UI Splitter component](images/components-splitter-overview-anatomy.png "A Telerik and Kendo UI Splitter component with its visual elements")</BlueprintImage>

#### Variants

Depending on the panes' behavior, the split bar of Telerik and Kendo UI Splitter can be any of the following types:

* Resizable only
* Resizable and collapsible to the right
* Resizable and collapsible to the left
* Resizable and collapsible both to the right and left

<BlueprintImage data='{"description":"","labels":[{"text":"Resizable only"},{"text":"Resizable and collapsible to the right"},{"text":"Resizable and collapsible to the left"},{"text":"Resizable and collapsible both to the right and left"}]}'>![A Telerik and Kendo UI Splitter and its four variants](images/components-splitter-overview-variants.png "The four variants of the Telerik and Kendo UI Splitter component")</BlueprintImage>

#### Orientation

Depending on the orientation, the split bar of Telerik and Kendo UI Splitter can be any of the following types:

* Vertical
* Horizontal

<BlueprintImage data='{"description":"","labels":[{"text":"Vertical splitbar"},{"text":"Horizontal splitbar"}]}'>![Two Telerik and Kendo UI Splitter components displaying the vertical and horizontal orientations](images/components-splitter-overview-orientation.png "The two possible orientations of the Telerik and Kendo UI Splitter 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 Splitter","description":"Find more information about the Kendo UI for Angular Splitter in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/splitter/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

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

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

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

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

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

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

</Wrap>