Blazor TabStrip Overview

Updated on Jun 24, 2026

The Blazor TabStrip component displays a collection of tabs, containing associated content, which enable the user to switch between different views inside a single component.

Comparison with ButtonGroup and SegmentedControl

The ButtonGroup, SegmentedControl, and TabStrip are similar and even inter-changeable in some aspects. The major differences between these components are:

• The ButtonGroup supports single and multiple selection. The SegmentedControl and TabStrip can only have one selected (active) item.
• The SegmentedControl is a databound component. The ButtonGroup and TabStrip use declarative items as child components.
• The TabStrip renders content containers and manages their visibility out-of-the-box. The ButtonGroup and SegmentedControl can also integrate with separate content containers, but this must rely on the component events and a custom implementation.

Creating Blazor TabStrip

1. Use the <TelerikTabStrip> tag.
2. Add a nested <TabStripTab> tag for each tab you want to include in the component.
3. Set tab titles through the Title parameter of the <TabStripTab> tags.
4. Place the desired content in each tab, including HTML markup and Razor components.

Basic Blazor TabStrip

Change Theme

Theme

Loading ...

ActiveTabId Parameter

The TabStrip ActiveTabId parameter allows you to manage the active tab by its string ID. The parameter supports two-way binding through an ActiveTabIdChanged EventCallback, allowing seamless updates between the component and the application state.

To deactivate all tabs, set the ActiveTabId parameter to string.Empty.

Using the TabStrip ActiveTabId parameter

<TelerikButton OnClick="@(() => TabStripActiveTabId = string.Empty)">Deactivate Tab</TelerikButton>

<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId">
    <TabStripTab Id="tab1"
                 Title="Tab 1">
        First tab content.
    </TabStripTab>
    <TabStripTab Id="tab2"
                 Title="Tab 2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Id="tab3"
                 Title="Tab 3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

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

Tab Position and Alignment

The TabStrip can position tabs on any side of the component. Tab alignment controls how tabs are distributed in the selected position.

For more details, see the TabStrip Position and Alignment article.

Tab Overflow and Scrolling

When tabs do not fit in the available space, the TabStrip provides three built-in behaviors: wrapping to multiple rows (default), scrolling, or collapsing overflowing tabs into a dropdown menu.

For more details, see the TabStrip Scrollable Tabs and Overflow Menu article.

Persist Content

By default, the TabStrip destroys the content of inactive tabs when the user switches tabs and re-initializes it when the tab becomes active again. To keep all tab content in the DOM and hide inactive tabs with CSS only, see the TabStrip Persist Content article.

Tab Reordering and Pinning

The TabStrip lets users reorder tabs by drag-and-drop and pin important tabs to a fixed position. See [Tab Reordering and Pinning] for details.

Templates

The TabStrip allows you to replace the plain text in the tab headers with custom HTML markup or components. You can also add custom content next to the tabs, for example, and Add button. For more details, see the TabStrip Templates article.

Dynamic Tabs

The TabStrip supports dynamic tab management, allowing you to add, remove, show, or hide tabs at runtime by iterating a collection of objects. For more details, see the TabStrip Dynamic Tabs article.

More TabStrip Features

• State Management—Save, restore, and programmatically control the TabStrip state to persist it across page visits.
• Events—Handle events such as ActiveTabIdChanged, OnTabReorder, PinnedChanged, and VisibleChanged to respond to user interactions.

TabStrip API

Get familiar with all TabStrip parameters, methods, and events in the TabStrip API Reference and the TabStripTab API Reference.

TabStrip Reference and Methods

The Blazor TabStrip component exposes methods for programmatic operation. To use them, define a reference to the component instance with the @ref directive attribute.

Get a reference to the TabStrip instance and use its methods

RAZOR

<TelerikTabStrip @ref="@TabStripRef" />

@code {
    private TelerikTabStrip? TabStripRef { get; set; }
}

Next Steps

• Set the TabStrip tab position and alignment
• Enable tab scrolling or overflow
• Persist tab content on active tab change
• Reorder and pin tabs
• Customize TabStrip UI with templates
• Change the number of tabs at runtime
• Manage TabStrip state
• Handle TabStrip events

See Also

• Live Demo: TabStrip
• TabStrip API Reference
• TabStripTab API Reference