TabStrip Tab Pinning and Reordering

Updated on Aug 11, 2026

The Telerik TabStrip for Blazor allows users to change the tab order in two ways:

• Reorder tabs by drag-and-drop
• Pin tabs to a high-priority position

Reorder Tabs

To enable users reorder tabs with drag-and-drop, set the TabStrip EnableTabReorder parameter to true.

TabStrip with drag-and-drop tab reordering

RAZOR

<TelerikTabStrip EnableTabReorder="true" />

Pin Tabs

Pinned tabs display at the start of the tab list, before all other unpinned tabs.

To allow a specific tab to be pinned, set the TabStripTab Pinnable parameter to true. Users can pin tabs through a context menu on the desired tab.

Use the tab's Pinned parameter to set the initial or runtime pinned state of a tab. Use two-way binding or the PinnedChanged event to keep the Pinned value in sync when users toggle the pin state through the context menu.

RAZOR

<TelerikTabStrip>
    <TabStripTab Pinnable="true"
                 @bind-Pinned="@TabPinned">
        Tab Content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    private bool TabPinned { get; set; }
}

Reorder and Pin Rules

The tab reorder and tab pin fatures obey the following rules:

• 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 dragged and dropped on the unpinned tab area.
• Disabled tabs cannot be reordered, pinned or unpinned. However, the order index of disabled tabs can change when users reorder the other tabs.

Example

Using TabStrip tab reordering and pinning

Example

View Source

<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId"
                 EnableTabReorder="true">
    <TabStripTab Id="tab1"
                 Pinnable="true"
                 @bind-Pinned="@Tab1Pinned"
                 Title="Tab 1">
        First tab content.
    </TabStripTab>
    <TabStripTab Id="tab2"
                 Pinnable="true"
                 @bind-Pinned="@Tab2Pinned"
                 Title="Tab 2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Id="tab3"
                 Title="Tab 3 Not Pinnable">
        Third tab content.
    </TabStripTab>
    <TabStripTab Id="tab4"
                 Pinnable="true"
                 @bind-Pinned="@Tab4Pinned"
                 Title="Tab 4">
        Fourth tab content.
    </TabStripTab>
    <TabStripTab Id="tab5"
                 Disabled="true"
                 Title="Disabled Tab 5">
        Fifth tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    private string TabStripActiveTabId { get; set; } = "tab1";

    private bool Tab1Pinned { get; set; }
    private bool Tab2Pinned { get; set; }
    private bool Tab4Pinned { get; set; }
}

Next Steps

• Customize TabStrip UI with templates
• Change the number of tabs at runtime
• Manage TabStrip state
• Handle TabStrip events

See Also

• Live Demo: TabStrip Tab Reordering
• Live Demo: TabStrip Tab Pinning