React Splitter

  • Flexible and fully accessible yet simple React Splitter component: resize, collapse or scroll any pane (content area).
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Splitter Header
  • Separate Web Content into Sections for an Intuitive User Flow

    The React Splitter enables developers to define sections of a page in a column and row structure. Each section can also be resized by simply dragging the provided handlers, and can be expanded and collapsed.

    See the React Splitter Overview demo

    React Splitter - Overview, KendoReact UI Library
  • Panes

    Panes are at the heart of the KendoReact Splitter. Each content area of the React Splitter is a Pane, and each Pane has options to help define dimensions and allow for resizing, collapsing or scrolling on a pane-by-pane basis.

    See the React Splitter Panes demo

    React Splitter - Panes, KendoReact UI Library
  • Orientation

    The KendoReact Splitter allows for each Pane to be arranged either horizontally or vertically.

    See the React Splitter Orientation demo

    React Splitter - Orientation, KendoReact UI Library
  • Keyboard Navigation

    With its built-in Keyboard Navigation, the KendoReact Splitter allows users to navigate between panes and use keyboard interactions to resize panes.

    See the React Splitter Keyboard Navigation demo

  • Accessibility

    The KendoReact Splitter is compliant with Section 508 and WAI-ARIA standards, and is AAA rated with WCAG 2.0.

    See the React Splitter Accessibility demo


All KendoReact Components

Next Steps