Figma component
Show the component in Figma
In Figma, the Splitter component represents only the draggable divider itself. The full layout (NvSplit) — including the two panels — is handled in code. Designers should place and configure only the Splitter, while developers are responsible for integrating it within an NvSplit container that manages Panel A and Panel B.
Beta
Show details
Overview
The Splitter component separates two panels and allows the user to resize them interactively. It supports both horizontal and vertical layouts and can optionally display a draggable handle.
It is instrumental in data-heavy or productivity interfaces where users want to control how much space each area occupies.
Key Features
- Two orientations: Horizontal and Vertical
- Resizable panels: Users can drag the splitter to adjust layout proportions
- Optional handle: The central handle can be shown or hidden
- Multiple interaction states: Default, Hover, Active
- Accessible by design: Large hit area and visible focus/hover feedback
- Layout-safe: Prevents panels from collapsing below minimum sizes
Anatomy
- Panel A: The first resizable content area
- Divider: The draggable separator between the two panels
- Handle (optional): A visual affordance indicating that the divider can be dragged
- Panel B: The second resizable content area
The divider always sits between Panel A and Panel B and is responsible for handling the resize interaction.
Props
Direction
Defines the orientation of the Splitter.
- vertical — Panels are side by side (left / right)
- horizontal — Panels are stacked (top / bottom)
State
Defines the interaction state of the divider. (default | hover | active )
Show Handle
Controls whether the central handle is displayed.
- true — The handle is visible
- false — Only the divider is shown
Themes
Usage Guidelines
When to use
- To let users resize two adjacent panels
- In complex layouts (editors, dashboards, data exploration tools)
- When both areas are important and their relative size may vary per user or per task
When not to use
- If the layout should stay fixed
- If one panel is rarely used (prefer a collapsible panel or a drawer instead)
- If resizing does not bring real user value
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.