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.
Steven Buchanan
59 rue de l'Abbaye
Reims, FranceMichael Suyama
Luisenstr. 48
Münster, GermanyMargaret Peacock
Rua do Paço, 67
Rio de Janeiro, BrazilJanet Leverling
2, rue du Commerce
Lyon, FranceMargaret Peacock
Boulevard Tirou, 255
Charleroi, BrazilJanet Leverling
Rua 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 in a horizontal tab list, wrapping from the last Tab to the first and skipping disabled Tabs. |
| LeftArrow | Focus previous Tab in a horizontal tab list, wrapping from the first Tab to the last and skipping disabled Tabs. |
| DownArrow | Focus next Tab in a vertical tab list, wrapping from the last Tab to the first and skipping disabled Tabs. |
| UpArrow | Focus previous Tab in a vertical tab list, wrapping from the first Tab to the last and skipping disabled Tabs. |
| Home | Focus the first Tab. |
| End | Focus the last 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