Blazor TabStrip - Overview

The Telerik UI for Blazor TabStrip allows you to switch views through a collection of tabs and their content. By using tabs within your web application, you provide users a straightforward way to view and navigate content within a single component.

Beyond the visual appeal of the Blazor TabStrip, it enables you to organize your content by grouping it in user-friendly tabs. This grouping ability applies to both Blazor WebAssembly (WASM) and Server-side Blazor apps. The Blazor TabStrip UI component has built-in features that allow you to set conditions to disable select tabs and add dynamic elements and responsive animations. You can control which tab is currently visible or make any changes based on user persistence. You have the flexibility to show the content you want within a tab collection to simplify the navigation, while offering users a delightful experience.The features that add to the richness of the Blazor TabStrip include TabStrip tabs, tab position, tab persistent state, header template, TabStrip events, theming and TabStrip accessibility and keyboard navigation.

TabStrip TabsThe Blazor TabStrip component is designed with different configuration parameters:

• Title – You can quickly designate the tab heading text you want presented.
• Visible – Control the tab visibility.
• Disabled – Easily select tabs to disable or enable them.

Tab Position

The Blazor TabStrip allows you to modify it in a way that best fits your application layout and goals. You can opt to place tab headers at the top, at the bottom or to the left or right of the content—that choice is yours.

TabStrip Persist State

In the event you want the content to persist when changing tabs, you can easily configure the Blazor TabStrip component to accommodate this request.

Header Template

If you wish to work with templates to control the content of each tab header, the TabStrip component allows you to offer rich content to your users through the utilization of icons or other Blazor components.

TabStrip Events

Tracking when a user has selected a tab along with restricting access to certain tabs is controlled through the ActiveTabIndexChanged event. You determine the events you want to apply for tracking purposes and then the TabStrip events feature will handle the rest for you.

Tab Strip 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 TabStrip content. Out-of-the-box keyboard support lets your users navigate the tabs without a mouse.

TabStrip Theming

The Telerik UI for Blazor TabStrip component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which resembles the Bootstrap styling). Right out of the box with a few lines of CSS, you can create your own custom theme that meets your design standards.