Radzen Blazor Components

Blazor Tabs

The Blazor Tabs component organizes content into tabbed panels, with positioning, dynamic tabs, and lazy or client/server rendering.

Tabs position Link to this section

Use the TabPosition property to position tabs at the top, bottom, left, or right of the content area.

10248 Vins et alcools Chevalier
$32.38

Steven Buchanan

Steven Buchanan

59 rue de l'Abbaye

Reims, France
10249 Toms Spezialitäten
$11.61

Michael Suyama

Michael Suyama

Luisenstr. 48

Münster, Germany
10250 Hanari Carnes
$65.83

Margaret Peacock

Margaret Peacock

Rua do Paço, 67

Rio de Janeiro, Brazil
10251 Victuailles en stock
$41.34

Janet Leverling

Janet Leverling

2, rue du Commerce

Lyon, France
10252 Suprêmes délices
$51.30

Margaret Peacock

Margaret Peacock

Boulevard Tirou, 255

Charleroi, Brazil
10253 Hanari Carnes
$58.17

Janet Leverling

Janet Leverling

Rua do Paço, 67

Rio de Janeiro, Brazil

Console log

Server render mode Link to this section

Only selected tab content will be rendered.

Customers

Client render mode Link to this section

All tabs will be rendered initially and tab change will be performed completely using JavaScript

Customers

TabItems modify Link to this section

Demonstrating modifications to the TabItem collection

Customers

Tab items wrap Link to this section

Demonstrating wrap of the Tab items

Tab0

Prevent Tab change Link to this section

Demonstrating how to prevent Tab change

Tab1

Reorder tabs Link to this section

Set AllowReorder to true to enable drag and drop reordering of tabs.

Customers

Console log

Keyboard Navigation Link to this section

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.

Frequently asked questions

How do I render tabs lazily in Blazor?

Set RenderMode so tab content loads on demand (client) or is kept server-side, and bind SelectedIndex to control the active tab.

Radzen Blazor Newsletter

Get an email when new components and releases ship.

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

Dedicated support backed by proven expertise

Premium themes and theme editor

Ready-to-use UI blocks

Complete app templates

Visual design-time-experience

Radzen Blazor Studio

Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Material 3 Expressive
  • Material 3 Expressive Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙