TabStrip Tab Reordering

Updated on Mar 25, 2026

The Telerik TabStrip for Blazor allows users to reorder tabs by dragging and dropping them to new positions.

Enable Tab Reordering

To let users reorder tabs, set the EnableTabReorder parameter to true.

TabStrip with drag-and-drop tab reordering

<TelerikTabStrip EnableTabReorder="true"
                 OnTabReorder="@OnTabReorder">
    <TabStripTab Title="First" Id="tab1">
        First tab content.
    </TabStripTab>
    <TabStripTab Title="Second" Id="tab2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="tab3">
        Third tab content.
    </TabStripTab>
    <TabStripTab Title="Fourth" Id="tab4">
        Fourth tab content.
    </TabStripTab>
</TelerikTabStrip>

<p>Last reorder: @ReorderLog</p>

@code {
    private string ReorderLog { get; set; } = "No reorder yet.";

    private void OnTabReorder(TabStripTabReorderEventArgs args)
    {
        ReorderLog = $"Tab moved from index {args.OldIndex} to index {args.NewIndex}.";
    }
}

Reorder Rules

Observe the following rules when using tab reordering:

• Pinned tabs can only be reordered among other pinned tabs.
• Unpinned tabs can only be reordered among other unpinned tabs. A pinned tab cannot be dropped into the unpinned tab area.
• Disabled tabs cannot be reordered.

Pinned Tabs

When tab pinning is enabled, pinned tabs are grouped at the start of the tab list. The reorder constraints prevent mixing of pinned and unpinned tabs.

See Also

• Tabs Configuration
• TabStrip State
• TabStrip Events