Splitter

Splitter is utilized to separate and resize panels.

Import#


import { Splitter, SplitterPanel } from 'primereact/splitter';

Horizontal#

Splitter requires two SplitterPanel components as children which are displayed horizontally by default.

Panel 1

Panel 2


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>

Size#

Initial dimension of a panel is percentage based and defined using the size property. In addition,minSize is provided to set a minimum value during a resize.

Panel 1

Panel 2


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center" size={75}>Panel 2</SplitterPanel>
</Splitter>

Vertical#

Panels are displayed as stacked by setting the layout to vertical.

Panel 1

Panel 2


<Splitter style={{ height: '300px' }} layout="vertical">
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
</Splitter>

Nested#

Splitters can be combined to create advanced layouts.

Panel 1

Panel 2

Panel 3

Panel 4


<Splitter style={{ height: '300px' }}>
    <SplitterPanel className="flex align-items-center justify-content-center" size={20} minSize={10}>
        Panel 1
    </SplitterPanel>
    <SplitterPanel size={80}>
        <Splitter layout="vertical">
            <SplitterPanel className="flex align-items-center justify-content-center" size={15}>
                Panel 2
            </SplitterPanel>
            <SplitterPanel size={85}>
                <Splitter>
                    <SplitterPanel className="flex align-items-center justify-content-center" size={20}>
                        Panel 3
                    </SplitterPanel>
                    <SplitterPanel className="flex align-items-center justify-content-center" size={80}>
                        Panel 4
                     </SplitterPanel>
                </Splitter>
             </SplitterPanel>
        </Splitter>
    </SplitterPanel>
</Splitter>

Accessibility#

Screen Reader

Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.

Keyboard Support

Key	Function
tab	Moves focus through the splitter bar.
down arrow	Moves a vertical splitter down.
up arrow	Moves a vertical splitter up.
left arrow	Moves a vertical splitter to the left.
right arrow	Moves a vertical splitter to the right.
home	Maximizes the primary panel.
end	Minimizes the primary panel.
enter	Toggles the primary panel between minimum and maximum sizes.

SUMMER SALE2025

Use coupon code PRSM25 at checkout to get 50% OFF everything in PrimeStore and PrimeBlocks.

Learn More