UI for Blazor
Blazor TabStrip
- Show a collection of tabs that highlight only parts of the content at a time with the Blazor TabStrip component.
- Part of the Telerik UI for Blazor library along with 120+ professionally-designed UI components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
TabStrip Tabs
The Blazor Tab Strip component exposes different configuration parameters:
- Title – Define the text you would like to see in the Tab heading
- Visible – Control the tab visibility
- Disabled – Determine the selection of tabs by marking them as disabled or enabled
-
Tab Position
To fit your scenario and layout, you can place the tab headers on top, at the bottom, or on either side of the content. You can check it out in the Tab Positions example.
-
TabStrip Persist State
The Blazor Tab Strip component can be configured whether to persist the content when changing tabs.
-
Organize Content in Beautiful Tabs with Blazor Tab Strip
The Blazor Tab Strip component lets you organize content into beautiful tabs that are easy to navigate in both Blazor WebAssembly (WASM) and Server-side Blazor apps. You can disable certain tabs on condition, select a given tab programmatically and respond to a new tab selection. Additional control parameters are also available – like being to able to determine which tab is currently visible or making any of the changes the user made persistent.
-
Tab Overflow
Improve usability in the Telerik UI for Blazor TabStrip when working with many tabs through built-in overflow handling. When there is not enough space to display all tabs, excess items are automatically moved into a dedicated overflow menu, keeping the layout clean and responsive. The component continuously adapts to available space, and users can easily access and activate hidden tabs directly from the overflow list.
See the Telerik UI for Blazor TabStrip tab overflow demo 
.gif?sfvrsn=f1ccd679_2)
-
Tab Reorder
Enable intuitive tab management in the Telerik UI for Blazor TabStrip with built-in drag-and-drop reordering. Users can easily rearrange tabs by dragging them to a new position, improving flexibility when working with dynamic or user-driven layouts.
See the Telerik UI for Blazor TabStrip tab reorder demo 
-
Tab Pinning
Improve tab organization in the Telerik UI for Blazor TabStrip with built-in tab pinning. Users can pin key tabs to keep them fixed at the start of the tab list, ensuring quick and consistent access. Pinned and unpinned tabs are managed as separate groups, allowing reordering within each group while preserving their position and structure, and enabling clear, predictable navigation.
See the Telerik UI for Blazor TabStrip tab pinning demo 
.jpg?sfvrsn=9ab4df0c_2)
-
State Management
Manage the Telerik UI for Blazor TabStrip state programmatically using its built-in state management capabilities. You can save and restore the current configuration, including selected tabs and layout, and react to state changes through dedicated events.
See the Telerik UI for Blazor TabStrip state management documentation 
-
Header Template
Control the content of each Blazor tab's header by providing a template for it. This allows you to add icons or even other Blazor components to offer rich content for your users.
Blazor TabStrip Header Templates
-
TabStrip Events
If you need to know that the user has selected a certain tab, the Blazor Tab Strip gives you the ActiveTabIndexChanged event so you can even choose to prevent the user from selecting the tab.
-
TabStrip Accessibility and Keyboard Navigation
Semantic HTML and adherence to web accessibility standards (WCAG, Section 508 and WAI-ARIA attributes for screen readers) help screen readers read the Telerik tab strip. Out-of-the-box keyboard support lets your users navigate the tabs without a mouse.
-
Right-to-Left (RTL) Support
The Telerik UI for Blazor Tab Strip component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.
Learn more in our Blazor Right-to-Left Support documentation
