# Splitter

Source: https://lumeo.nativ.sh/components/splitter

# Splitter

Multi-pane resizable layout for dashboards, editors, and IDE-style UIs. Supports horizontal, vertical, and nested arrangements.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Splitter />

## When to Use

-   Editor layouts with sidebar, main content, and inspector panels
-   Dashboards where users adjust the size of multiple regions at once
-   File manager style tri-panels (tree, list, preview)
-   Anywhere Resizable's 2-pane model is not enough — Splitter accepts N panes

Preview Code

Two Panes — Horizontal

Left

Right

Preview Code

Three Panes — Sidebar + Main + Aside

Sidebar

Navigation

Main

Primary content area

Aside

Inspector

Preview Code

Vertical Stack

Editor

Terminal

Preview Code

Nested — Horizontal containing Vertical

Files

Code

Output

Preview Code

Orientation — interactive

Pick a value to see it applied live. **Horizontal** places the divider vertically between side-by-side panes; **Vertical** places the divider horizontally between stacked panes.

HorizontalVertical

Pane A

Pane B

## API Reference

### Splitter

Prop

Type

Default

Description

Orientation

Lumeo.Orientation

Horizontal

Layout direction. Values: Horizontal, Vertical.

ChildContent

RenderFragment?

null

SplitterPane and SplitterDivider children.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### SplitterPane

Prop

Type

Default

Description

Size

double

0

Initial size as a percentage. 0 means distribute remaining space equally among unset panes.

MinSize

double

10

Minimum size percentage.

MaxSize

double

90

Maximum size percentage.

Collapsible

bool

false

Reserved for future collapse behavior.

ChildContent

RenderFragment?

null

Pane content.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### SplitterDivider

Place a `SplitterDivider` between each pair of `SplitterPane` elements you want to resize. It binds to the nearest pane on each side at drag time.

Prop

Type

Default

Description

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [Resizable](/components/resizable) — Simpler two-panel resizable group
-   [Sidebar](/components/sidebar) — App-level collapsible navigation sidebar
-   [ScrollArea](/components/scroll-area) — Styled scrollable container for overflowing pane content