New to KendoReact? Start a free 30-day trial
Drag and Drop to Reorder TabStrip Tabs
Updated on May 5, 2026
Environment
| Product Version | 14.4.0 |
| Product | Progress® KendoReact TabStrip |
Description
The KendoReact TabStrip does not support drag-and-drop reordering of tabs out of the box. I want to allow end users to rearrange tabs by dragging them.
Solution
Render a custom element inside the title prop of each TabStripTab and attach drag-and-drop behavior to it using the useDraggable and useDroppable hooks from @progress/kendo-react-common. When a drop occurs, update the array of tabs in state and recalculate which index is selected so the active tab stays the same after the reorder.
The example below demonstrates the complete approach:
Change Theme
Theme
Loading ...