# Splitter
**Path:** Components/Layout
[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)
---
Splitter
RbSplitter is a layout component that provides resizable, nestable panes for creating flexible layouts.
Perfect for building applications like Outlook-style interfaces, Windows Explorer layouts, code editors, and more.
The component supports both horizontal and vertical splitting with customizable pane sizes and constraints.
Horizontal Split
Basic horizontal splitter with left and right panes.
Show code
Basic Horizontal Splitter
Left Pane
This is the left pane. Drag the splitter bar to resize.
Right Pane
This is the right pane. It automatically fills the remaining space.
Fixed Left Panel (250px)
Sidebar (250px)
This pane starts at 250px wide.
Item 1
Item 2
Item 3
Main Content
The main content area expands to fill available space.
Custom Initial Split (30%/70%)
30% Width
This pane takes 30% of the available width.
70% Width
This pane takes the remaining 70%.
Vertical Split
Vertical splitter with top and bottom panes.
Show code
Basic Vertical Splitter
Top Pane
This is the top pane. Drag the splitter bar vertically to resize.
Bottom Pane
This is the bottom pane. It automatically fills the remaining space.
Fixed Top Panel (150px)
Header Area (150px)
This pane starts at 150px tall.
Content Area
The content area expands to fill available height.
Perfect for layouts with a fixed header and scrollable content below.
Custom Initial Split (40%/60%)
40% Height
This pane takes 40% of the available height.
60% Height
This pane takes the remaining 60%.
Pane Sizing
Control initial pane sizes and minimum size constraints.
Show code
Minimum Size Constraints
Try to resize the panes - they won't go below their minimum sizes.
Left Pane
Initial: 250px
Minimum: 150px
Try resizing - it won't go below 150px.
Right Pane
Minimum: 200px
This pane also has a minimum width of 200px.
Vertical with Min Sizes
Top Pane (Min: 100px)
Cannot be resized below 100px in height.
Bottom Pane (Min: 150px)
Cannot be resized below 150px in height.
Percentage-based Sizing
Configuration:
FirstPaneSize="25%"
The first pane will take 25% of the total width, and resize with the window.
25% Width
This pane is 25% of the container width.
75% Width
This pane takes the remaining 75%.
Nested Splitters
Combine horizontal and vertical splitters to create complex layouts.
Show code
Horizontal with Nested Vertical
Left Sidebar
This is a fixed sidebar on the left.
Navigation Item 1
Navigation Item 2
Navigation Item 3
Top Right
Content area at the top right.
Bottom Right
Content area at the bottom right.
Vertical with Nested Horizontal
Header
Application header area.
Left Panel
Sidebar content below the header.
Main Content
Main content area below the header.
Three-Level Nesting
Left Sidebar
Navigation panel.
Toolbar
Toolbar area.
Main Content
Primary content area with most space.
Properties Panel
Properties or details panel on the right.
Layout Examples
Common application layout patterns using nested splitters.
Show code
Email Client Layout (Outlook-style)
Folders
Inbox (12)
Sent
Drafts (3)
Trash
Message List
John Doe - Meeting Tomorrow
Jane Smith - Project Update
Bob Wilson - Quick Question
Message Preview
From: John Doe
Subject: Meeting Tomorrow
Hi team, just a reminder about our meeting tomorrow at 10 AM...
File Explorer Layout
Folders
Documents
Pictures
Downloads
Projects
Files
Document.pdf
Report.docx
Data.xlsx
Preview / Details
Name: Document.pdf
Size: 2.5 MB
Modified: Today
Code Editor Layout
Explorer
src
App.razor
Program.cs
wwwroot
Editor
@page "/"
Hello World
Welcome to your app.
Output / Terminal
> dotnet build
Build succeeded.
> dotnet run
Dashboard Layout
Dashboard Header
Filters
Date Range
Category
Status
Main Chart
Primary data visualization area.
Statistics
Total: 1,234
Active: 567
Pending: 89
✕
Contents