www.radzen.com

Radzen Blazor Components

Tabs

Demonstration and configuration of the Radzen Blazor Tabs component.

These demos showcase tabbed interfaces with various configurations including tab positioning, server/client render modes, dynamic tab item modifications, tab wrapping behavior, and conditional tab change prevention with the CanChange event.

Tabs position link

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

Example
Edit Source

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

All the tools in one place

Save Hours on Every Project

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

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

CRUD Operations and Data Management

Seamless Integration

Digital Transformation and Modernization

Design Systems and Consistency

From Prototyping to Production

Time to Market Reduced

Empower the Next Generation

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

Save Hours on Every Project

On this page

Demos Configuration