New to Kendo UI for Angular? Start a free 30-day trial

SplitterComponent

Updated on Oct 30, 2025

Represents the Kendo UI Splitter component for Angular.

html

<kendo-splitter [style.height.px]="280">
  <kendo-splitter-pane [collapsible]="true" size="30%">
    <h3>Left pane</h3>
  </kendo-splitter-pane>
  <kendo-splitter-pane>
    <h3>Right pane</h3>
  </kendo-splitter-pane>
</kendo-splitter>

Selector

kendo-splitter

Export Name

Accessible in templates as #kendoSplitterInstance="kendoSplitter"

Inputs

Name	Type	Default	Description
orientation	`Orientation`	`'horizontal'`	Defines the orientation of the panes within the Splitter. Use `horizontal` to place panes horizontally or `vertical` to place them vertically.
resizeStep	`number`	`10`	Defines the distance in pixels that you move the separator during keyboard navigation.
splitbarWidth	`number`		Defines the width or height of the Splitter splitbars in pixels. The dimension depends on the orientation of the Splitter.
splitterBarClass	`string \| object \| string[]`		Defines the CSS classes that are rendered on the splitter bars. Supports the same values as `ngClass`.

Events

Name	Type	Description
layoutChange	`EventEmitter<string>`	Fires when the layout of the Splitter changes. Use this event to trigger layout calculations on components that are positioned inside the panes.