Angular Splitter Component, Resizable Panes

What is Splitter?

ngb-splitter arranges panes with draggable handles, so navigation, editors, and previews stay in view without hand-written drag logic.

Simple splitters &

Basic horizontal splitter with optional sized side panes and a flexible middle pane.

Loading interactive example…

Left and right panes use fixed percentages to reserve navigation or summary space.
The center pane omits size, so it flexes to fill remaining width.
Any pane can be marked collapsible and controlled via handles or your own triggers.

<ngb-splitter orientation="horizontal">
            <ngb-splitter-pane size="20%">Left pane</ngb-splitter-pane>
            <ngb-splitter-pane>Middle pane</ngb-splitter-pane>
            <ngb-splitter-pane size="20%">Right pane</ngb-splitter-pane>
          </ngb-splitter>

Scrollable panes

Use [scrollable] to control whether pane content can scroll. This is useful for sidebars and log panes.

Loading interactive example…

<ngb-splitter class="doc-splitter" orientation="horizontal">
            <ngb-splitter-pane [scrollable]="false">...</ngb-splitter-pane>
            <ngb-splitter-pane>...</ngb-splitter-pane>
          </ngb-splitter>

Vertical panes & collapse

Show, hide, and resize stacked panes (top/bottom) with the same component.

Loading interactive example…

<ngb-splitter orientation="vertical">
            <ngb-splitter-pane collapsible size="40%">Summary</ngb-splitter-pane>
            <ngb-splitter-pane>Content</ngb-splitter-pane>
            <ngb-splitter-pane min="20%">Notes</ngb-splitter-pane>
          </ngb-splitter>

Min/max enforcement

Guarantee minimum read widths and prevent panes from shrinking to unusable sizes.

Loading interactive example…

<ngb-splitter>
            <ngb-splitter-pane size="20%" min="5%">...</ngb-splitter-pane>
            <ngb-splitter-pane size="60%" min="40%">...</ngb-splitter-pane>
            <ngb-splitter-pane size="20%" min="12%" max="35%">...</ngb-splitter-pane>
          </ngb-splitter>

Collapsible panes

Handles now render collapse glyphs. You can still wire your own triggers if you prefer.

Loading interactive example…

<ngb-splitter-pane collapsible [(collapsed)]="paneState">
            ...
          </ngb-splitter-pane>

Globalization

Splitter respects RTL documents and localized content.

Loading interactive example…

<section dir="rtl">
            <ngb-splitter>...</ngb-splitter>
          </section>

Accessibility

Handles expose role="separator", aria-orientation, and announce collapse state. Add contextual labels to describe each region.

<ngb-splitter aria-label="Content layout">
            <ngb-splitter-pane aria-label="Navigation pane">...</ngb-splitter-pane>
            <ngb-splitter-pane aria-label="Detail pane">...</ngb-splitter-pane>
          </ngb-splitter>

Keyboard navigation

Focus a handle (Tab) then use Arrow keys to resize (hold Shift for bigger steps) or Enter to toggle collapsible panes.

<ngb-splitter>
            <!-- Handles are focusable and respond to Arrow/Enter -->
            <ngb-splitter-pane>...</ngb-splitter-pane>
            <ngb-splitter-pane>...</ngb-splitter-pane>
          </ngb-splitter>