Panes
The Splitter component divides content into resizable sections called panes. Each pane can contain different content and be configured independently to create flexible, user-customizable layouts.
You can control the following aspects of Splitter panes:
- Dimensions—Set initial sizes and size constraints.
- Resizing—Enable or disable user resizing.
- Collapsing—Allow panes to be hidden and shown.
- Scrolling—Control content overflow behavior.
- Customizing Split Bars—Add attributes and classes to the split bars next to specific panes.
- Persisting Pane State—Save user preferences across sessions.
Dimensions
The size property controls the dimensions of the Splitter panes. To control the minimum and maximum size of a pane, use the min and max properties of the SplitterPane component. The min, max and size properties accept units in both pixel and percentage values.
To let the Splitter evenly distribute the available space between panes of non-declared size, leave the size of one or more panes unspecified. Otherwise, if you declare size for all panes, the Splitter will throw an error in development mode.
The following example demonstrates how to specify the dimensions of the Splitter panes.
Resizing
By default, the Splitter lets users resize its panes. To turn off this behavior, set the resizable property to false.
The following example demonstrates how to disable the resizing feature of the Splitter panes.
Collapsing
You can let a Splitter pane collapse by setting the collapsible property to true. As a result, the Splitter renders a button which shows or hides the pane. To collapse a pane, you can also double-click the split-bar. To render a pane that starts collapsed, use the collapsed property.
The following example shows how to collapse a pane by using the collapsible property. Click the Collapse button to collapse the left pane, or double-click the split-bar between the panes.
Scrolling
By default, the content of the Splitter panes is scrollable. To turn off the scrolling feature, set the scrollable property to false.
The following example demonstrates how to disable the scrolling feature of the Splitter panes.
Customizing Split Bars
You can customize the split bar that follows a pane by using the pane-level splitterBarAttributes and splitterBarClass properties. Use these options when a specific split bar needs different attributes or styling from the rest of the Splitter.
The following example shows a three-pane layout where both split bars are customized with a CSS class for distinct visual styling and HTML attributes for accessibility and testing hooks. Hover over a split bar to see the custom tooltip text.
Adding HTML Attributes
Use the splitterBarAttributes property to add HTML attributes to the split bar next to a pane. This option is useful for values such as title, aria-label, and testing hooks.
<kendo-splitter-pane [splitterBarAttributes]="navBarAttributes">
...
</kendo-splitter-pane>Applying CSS Classes
Use the splitterBarClass property to apply CSS classes to the split bar next to a pane. This option is useful when one split bar needs different styling from the rest. To apply the same classes to all split bars, use the splitterBarClass property on the Splitter component.
<kendo-splitter-pane splitterBarClass="nav-splitbar">
...
</kendo-splitter-pane>Persisting Pane State
To persist the pane state, including both size and collapse state, bind to the relevant properties and store their values in a persistent storage solution. For the size property, use two-way binding with a getter/setter pattern to automatically persist changes. For the collapsed property, use event handling with the collapsedChange event. This approach lets users maintain their preferred layout across application sessions.
The following demo shows persistence for both pane size and collapse state by using two-way binding for size and handling the collapsedChange event. The demo stores values in localStorage. Modify the panes and reload the page to see the state persistence in action.