Blazor Splitter - Overview

Total Bikes Sold
January 2020 - February 2020
Shop Revenue
January 2020 - February 2020
Monthly Target
January 2020 - February 2020
  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui 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.


The Telerik UI for Blazor Splitter component splits the page into sections and allows the user to control the page layout. By dragging the split bars, using their collapse/expand buttons and double-clicking the split bars, you can adjust the size and visibility of the panes so you can see the information that interests you.

You can put any content in the splitter, such as plain HTML and other components, or even add more splitters so you can create complex layouts for users to resize and tailor.

A Splitter could act as a high-level component that holds or even creates the majority of the layout of your application, or it can be placed within a page to serve a specific purpose.

The Splitter and its panes can be customized in several ways. The control can be positioned horizontally or vertically. You can add a CSS class to both the Splitter and its panes to configure their default, minimum and maximum sizes and define if they can be resized and collapsed.

Three events are triggered by the component—OnResize, OnExpand and OnCollapse. Each event is fired when a pane of the splitter is resized, expanded or collapsed with the pane being passed as an argument. You can use them to store the Splitter state so when your user returns to the page, it would render just as they left it.

This Blazor Splitter Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.