Blazor Splitter Overview

The Blazor Splitter component lets you divide a portion of the page into several pieces that the user can resize and collapse. This provides real estate management for the app and the end user so they can focus on the content that is important in their current task. You can also save and load its state, and respond to events.

Telerik UI for Blazor Ninja image

The Splitter component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Splitter

  1. Add the <TelerikSplitter> tag.
  2. Set the Width and Height parameters in any valid CSS unit. See Splitter Parameters for more information about the component behavior when dimensions are not set.
  3. Inside the <SplitterPanes> child tag, add the desired <SplitterPane> tags to create sections of content.
  4. Inside each <SplitterPane>, add the desired content as HTML markup or other components.
  5. Configure the panes. For example, set their Size, Min, Max, Collapsible, and Resizable parameters. By default, Splitter panes are resizable, but not collapsible.

Basic Splitter

<TelerikSplitter Orientation="@SplitterOrientation.Horizontal"

        <SplitterPane Size="100px" Min="50px" Max="150px" Collapsible="true">
            Left pane. Users can collapse it or resize it between 50px and 150px.

        <SplitterPane Collapsible="false">
            Middle pane, which cannot be collapsed.

        <SplitterPane Collapsed="true" Collapsible="true" Resizable="false" Size="100px">
            Right pane that is 100px wide and initially collapsed. Users cannot resize it.


The following sample app shows how to create a 100%-high page layout with a Splitter that includes a header, footer, and sidebar: How to make the Splitter take up 100% of the viewport.


Тhe Panes are the building blocks of the Splitter. Each pane controls its own behaviors such as the ability to change its size and collapse. Read more about the Splitter Panes...


The Splitter panes can stack horizontally or vertically. Read more about how to configure the Splitter orientation...


The Splitter allows you to save its state and programmatically control it. Read more about the Splitter state...


The Splitter fires events that you can handle to further customize the component behavior and respond to the user actions. Read more about the Blazor Splitter events...

Splitter Parameters

The Blazor Splitter provides various parameters for its configuration. The following table lists Splitter parameters on component level. Explore the Splitter Panes article for details on the individual Panes configuration.

Check the Splitter API Reference for a full list of properties, methods and events.

Parameter Type Description
AriaLabel string The aria-label attribute of the splitbars elements (<div class="k-splitbar">).
Class string The CSS class that renders on the Splitter element (<div class="k-splitter">).
Height string The height style of the Splitter. See the Dimensions article for details on what units you can use and how percentage dimensions work. If not set, the Splitter will shrink and expand, according to the pane sizes and content.
Orientation SplitterOrientation enum
Whether the content will be split up (how the panes will stack) horizontally or vertically.
Width string The width style of the Splitter in any valid CSS unit. If not set, the Splitter will expand horizontally to 100%.

Splitter Reference and Methods

Add a reference to the component instance to use the Splitter methods.

Method Description
GetState Gets the current state of the Splitter.
SetState Sets the current state of the Splitter.
<TelerikButton OnClick="@GetSplitterState">Get Splitter State</TelerikButton>

<TelerikSplitter @ref="@SplitterRef"
            <div>left sidebar</div>
            <div>right hand side pane - content.</div>

@code {
    private TelerikSplitter? SplitterRef { get; set; }

    private void GetSplitterState()
        var splitterState = SplitterRef?.GetState();

Next Steps

See Also

In this article