Radzen Blazor Components

API Reference About Radzen GitHub

Tabs

Demonstration and configuration of the Radzen Blazor Tabs component.

Tabs position link

Example
Edit Source

Top

TopRight

Bottom

BottomRight

Left

Right

Photo

Last Name

First Name

Employee ID

Title

Birth Date

Hire Date

Address

City

Region

Postal Code

Country

Home Phone

Extension

Notes

No records to display.

Customer ID Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Company Name Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Contact Name Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Contact Title Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Address Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	City Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Region Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Postal Code Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Country Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Phone Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Fax Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty
No records to display.

Console log

Server render mode link

Only selected tab content will be rendered.

Example
Edit Source

Customers

Client render mode link

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

Example
Edit Source

Customers

TabItems modify link

Demonstrating modifications to the TabItem collection

Example
Edit Source

Customers

Tab items wrap link

Demonstrating wrap of the Tab items

Example
Edit Source

Tab0

Prevent Tab change link

Demonstrating how to prevent Tab change

Example
Edit Source

Tab1
Tab2

Tab1

Keyboard Navigation link

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.
Right Arrow	Focus next Tab.
Left Arrow	Focus previous Tab.
Space or Enter on a focused Tab	Select the Tab.

Supercharge your Blazor development with Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

open_in_new Learn More

Save $100 with our Black Friday deals!

Tabs

Tabs position link

Server render mode link

Client render mode link

TabItems modify link

Tab items wrap link

Prevent Tab change link

Keyboard Navigation link

Supercharge your Blazor development with Radzen Blazor Studio

Demos Configuration