TelerikTabStrip
A tabbed navigation component with configurable placement, scrolling, and programmatic activation. Define tabs via TabStripTab in ChildContent; control active tab with ActiveTabId/ActiveTabIdChanged, and placement through TabPosition (Top/Bottom/Left/Right). Supports content persistence (PersistTabContent), scrollable tab lists (Scrollable with ScrollButtonsPosition and ScrollButtonsVisibility), alignment (TabAlignment), sizing (Size), and container dimensions (Width/Height). Keyboard navigation (Home/End/Arrow keys) and focus handling are built-in. Children: TabStripTab tags.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Syntax:
public class TelerikTabStrip : BaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseBaseComponentTelerikTabStrip
Implements:
Inherited Members
Constructors
public TelerikTabStrip()Methods
protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
public override void Dispose()Overrides:
Gets the current state of the TabStrip, including the active tab, the order of tabs, and the visibility and pinned settings for each tab.
public TabStripState GetState()The returned TabStripState contains only UI configuration such as active tab id, tab ordering, and per-tab visibility and pinned information. It does not include tab content, user data, templates, or any underlying data source. Use this method to capture the TabStrip configuration so that it can later be restored with SetState(TabStripState).
Forces the TabStrip to re-render its content and update its visual state. Call this method when external data changes require the TabStrip to refresh its appearance or when tabs are dynamically modified.
public void Refresh()public override Task SetParametersAsync(ParameterView parameters)Overrides:
Applies a previously captured TabStrip state to restore the active tab, tab order, and the visibility and pinned settings of each tab.
public Task SetState(TabStripState state)The TabStripState to apply. If null, the method does nothing.
This method restores the active tab, the ordering of tabs, and each tab's visibility
and pinned configuration from the provided state.
It does not recreate tabs, load or persist their content, restore templates, or
modify any underlying data source.
Tabs that exist in the component but are not present in state
keep their relative order after the restored tabs.
Properties
Sets the unique identifier of the active tab.
[Parameter]
public string ActiveTabId { get; set; }Occurs when the active tab changes through user interaction or programmatic updates. Use with ActiveTabId for two-way binding (bind-ActiveTabId) to track and control tab selection by unique identifier.
[Parameter]
public EventCallback<string> ActiveTabIdChanged { get; set; }The content of the TabStrip. Children: TabStripTab tags.
[Parameter]
public RenderFragment ChildContent { get; set; }Specifies whether users can reorder tabs via drag-and-drop interaction.
[Parameter]
public bool EnableTabReorder { get; set; }Enables WebMCP tool registration for this TabStrip, allowing AI models to discover and invoke tab operations.
[Parameter]
public bool EnableWebMcpTools { get; set; }Sets the component height using any valid CSS unit (e.g., "400px", "75vh", "25em"). Controls the total TabStrip area including tabs and content regions.
[Parameter]
public string Height { get; set; }Sets a unique identifier for the TabStrip component instance. Useful for CSS targeting, automation testing, and accessibility scenarios where specific TabStrip identification is required.
[Parameter]
public string Id { get; set; }Raises after initialization whenever the TabStrip state changes, for example when the active tab changes. Use this event to get the latest state upon changes due to user interaction. This event is not raised for the initial state (handled by OnStateInit).
[Parameter]
public EventCallback<TabStripStateEventArgs> OnStateChanged { get; set; }Raises when the TabStrip initializes its state, before it starts sending regular state change notifications. Use this event to inspect, customize, or restore the initial state (for example, the active tab) represented by the TabStripStateEventArgs argument.
[Parameter]
public EventCallback<TabStripStateEventArgs> OnStateInit { get; set; }Occurs when a tab drag-and-drop operation completes. Provides the tab ID and the destination index after the drop.
[Parameter]
public EventCallback<TabStripTabDropEventArgs> OnTabDrop { get; set; }Occurs when a tab is reordered through drag-and-drop interaction. Provides the tab ID and its new zero-based index position after reordering.
[Parameter]
public EventCallback<TabStripTabReorderEventArgs> OnTabReorder { get; set; }Configures the behavior of tabs when they exceed the available space in the tab list area.
[Parameter]
public TabStripOverflowMode OverflowMode { get; set; }Preserves tab content in memory when switching between tabs, avoiding content recreation.
Improves user experience for forms and complex content but increases memory usage with many tabs. Default value is false.
[Parameter]
public bool PersistTabContent { get; set; }Enables horizontal scrolling when tabs exceed the available width.
Works with ScrollButtonsPosition and ScrollButtonsVisibility to control scroll button behavior. Default value is false.
[Obsolete("The parameter is deprecated. Use OverflowMode instead with TabStripOverflowMode.Scroll value.")]
[Parameter]
public bool Scrollable { get; set; }Controls where scroll buttons appear when Scrollable is enabled. Use Split (default) for buttons on both sides, Start for buttons before tabs, or End for buttons after tabs.
[Parameter]
public TabStripScrollButtonsPosition ScrollButtonsPosition { get; set; }public bool ScrollButtonsVisible { get; }Controls the visual size of tabs and related elements. Use "small", "medium" (default), or "large" to match your application's design scale and improve touch accessibility.
[Parameter]
public string Size { get; set; }Defines the settings container for the TabStrip. Place TabStripWebMcpSettings inside.
[Parameter]
public RenderFragment TabStripSettings { get; set; }Template rendered after the tab list, inside the TabStrip container. Use this template to add custom content such as action buttons, dropdowns, or additional navigation elements related to the tabs.
[Parameter]
public RenderFragment TabStripSuffixTemplate { get; set; }Sets the component width using any valid CSS unit (e.g., "300px", "50%", "20em"). Affects the overall TabStrip container and influences tab scrolling behavior when combined with Scrollable.
[Parameter]
public string Width { get; set; }