New to Telerik UI for Blazor? Start a free 30-day trial

TabStrip Dynamic Tabs

Updated on Oct 1, 2026

Dynamic tabs signify the ability to add and remove tabs at runtime, or change their configuration. The Telerik Blazor TabStrip allows you to define tabs by iterating a collection of objects. This article describes the implementation milestones of such scenarios.

Hiding and Showing Tabs

The TabStrip tabs can be hidden or shown by setting their Visible boolean parameter. Setting Visible to false hides the tab from the tab list, but keeps it in the tab collection. Changing the tab visibility at runtime preserves the tab order. This is in contrast to adding a new tab at runtime, which adds it at the last position.

The TabStripTab component has a Closeable parameter with a false default value. When Closeable is enabled, the tab renders a built-in Close button next to the tab title. Closing a tab sets its Visible parameter to false. In this case, you must either use the Visible parameter with two-way binding (@bind-Visible="..."), or handle the VisibleChanged event that fires when a tab is closed. Either approach ensures that the tab state matches the app state. You can use the VisibleChanged event to intercept close actions, for example, show a confirmation dialog.

Showing hidden tabs is possible with custom UI.

Using the tab Closeable and Visible parameters, and the VisibleChanged event

Loading ...

Also see the more comprehensive example below.

Adding and Removing Tabs

The TabStrip uses declarative tab definitions and is not a databound component. To change the actual number of tab objects in the component (no matter their visibility), you need to:

Render the tabs in a loop, based on a collection of objects. Always set a @key attribute to the <TabStripTab> tags.

Example
View Source
Loading ...
Change the number of members in the looped collection through custom UI and application logic. See the comprehensive example below.

Changing Tab Settings

The app can change the TabStripTab parameter values at any time.

Some TabStripTab parameters support two-way binding, for example, Visible and Pinned. If users can change these tab properties at runtime, you must use two-way parameter binding or the respective Changed event. Otherwise the TabStrip state may become invalid and reset unexpectedly when the UI refreshes.

Example

The following sample shows how to:

Define the TabStrip tab configuration through a collection of custom descriptors. Some tabs are closed, pinned, disabled or not closable.
Use a @key when rendering Blazor components in a loop, which is a standard Blazor requirement.
Synchronize the Pinned and Visible state of the tabs with the underlying tab descriptor collection.
Display scroll buttons automatically when the tabs no longer fit the available space.
Use a TabStripSuffixTemplate to add custom buttons in the tab row.
Use the VisibleChanged event to hide closed tabs (default) or completely remove them from the tab collection. Tab removal can also be implemented through the OnStateChanged event.
Add more tabs at runtime.
Show closed (hidden) tabs.