React Splitter Overview

    The Ignite UI for React Splitter provides a resizable split-pane layout that divides content into two areas: start and end. Users can drag the splitter bar, use keyboard shortcuts, or collapse and expand panes with built-in controls. You can also nest splitters to build complex dashboard-style layouts.

    React Splitter Example

    Getting Started with React Splitter

    First, you need to install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react

    You will then need to import the IgrSplitter and its necessary CSS, like so:

    import { IgrSplitter } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Using React Splitter

    Use the start and end slots to place pane content:

    <IgrSplitter>
  <div slot="start">Start pane content</div>
  <div slot="end">End pane content</div>
</IgrSplitter>

    Orientation

    Set the orientation property to control pane direction:

    • horizontal (default): start and end panes are rendered left and right.
    • vertical: start and end panes are rendered top and bottom.
    <IgrSplitter orientation="vertical">
  <div slot="start">Top pane</div>
  <div slot="end">Bottom pane</div>
</IgrSplitter>

    Pane Size and Constraints

    Use size properties to set initial and constrained pane sizes:

    Values accept CSS length values such as px and %.

    <IgrSplitter
  startSize="35%"
  endSize="65%"
  startMinSize="200px"
  endMinSize="180px"
>
  <div slot="start">Navigation</div>
  <div slot="end">Main content</div>
</IgrSplitter>

    Collapsing and Resizing

    Use these properties to control interactions:

    You can also collapse or expand panes programmatically:

    import { useRef } from 'react';

const splitterRef = useRef<IgrSplitterComponent>(null);

const toggleStartPane = () => {
  splitterRef.current?.toggle('start');
};

    Nested Splitters

    Splitters can be nested to create multi-region layouts.

    Events

    The Splitter emits the following events during resize operations:

    The event detail includes current StartPanelSize, EndPanelSize, and Delta for ongoing and end events.

    const handleResizeEnd = (event: CustomEvent<IgcSplitterResizeEventArgs>) => {
  console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta);
};

<IgrSplitter onResizeEnd={handleResizeEnd}>
  <div slot="start">Start pane</div>
  <div slot="end">End pane</div>
</IgrSplitter>

    Keyboard Navigation

    When the splitter bar is focused:

    Keys Description
    Arrow Left / Arrow Right Resize panes in horizontal orientation
    Arrow Up / Arrow Down Resize panes in vertical orientation
    Home Snap start pane to its minimum size
    End Snap start pane to its maximum size
    Ctrl + Arrow Left / Arrow Up Collapse or expand the start pane
    Ctrl + Arrow Right / Arrow Down Collapse or expand the end pane

    Styling

    The IgrSplitter component exposes CSS parts for styling:

    Name Description
    splitter-bar The draggable separator between panes
    drag-handle The drag handle element in the splitter bar
    start-pane The start pane container
    end-pane The end pane container
    start-collapse-btn Button that collapses the start pane
    end-collapse-btn Button that collapses the end pane
    start-expand-btn Button that expands the start pane
    end-expand-btn Button that expands the end pane

    It also supports theme CSS variables, including:

    • --bar-color
    • --handle-color
    • --expander-color
    • --bar-color-active
    • --handle-color-active
    • --expander-color-active
    • --focus-color
    • --size
    igc-splitter {
  --bar-color: #011627;
  --handle-color: #ecaa53;
  --expander-color: #ecaa53;
  --bar-color-active: #011627;
  --handle-color-active: #ecaa53;
  --expander-color-active: #ecaa53;
  --focus-color: #ecaa53;
}

    API References

    Additional Resources