The Blazor Tabs component organizes content into tabbed panels, with positioning, dynamic tabs, and lazy or client/server rendering.
Use the TabPosition property to position tabs at the top, bottom, left, or right of the content area.
59 rue de l'Abbaye
Reims, FranceLuisenstr. 48
Münster, GermanyRua do Paço, 67
Rio de Janeiro, Brazil2, rue du Commerce
Lyon, FranceBoulevard Tirou, 255
Charleroi, BrazilRua do Paço, 67
Rio de Janeiro, BrazilConsole log
Only selected tab content will be rendered.
All tabs will be rendered initially and tab change will be performed completely using JavaScript
Demonstrating modifications to the TabItem collection
Demonstrating wrap of the Tab items
Demonstrating how to prevent Tab change
Set AllowReorder to true to enable drag and drop reordering of tabs.
Console log
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Tabs component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to a Tabs component. |
| RightArrow | Focus next Tab. |
| LeftArrow | Focus previous Tab. |
| Space or Enter on a focused Tab | Select the Tab. |
Set RenderMode so tab content loads on demand (client) or is kept server-side, and bind SelectedIndex to control the active tab.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT