# Tabs
The Blazor Tabs component organizes content into tabbed panels, with positioning, dynamic tabs, and lazy or client/server rendering.
Keywords: tabstrip, tabview, container
> API reference: [RadzenTabs API](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenTabs.md)
## Examples
## Blazor Tabs
The Blazor Tabs component organizes content into tabbed panels, with positioning, dynamic tabs, and lazy or client/server rendering.
### Tabs position
Use the `TabPosition` property to position tabs at the top, bottom, left, or right of the content area.
```razor
@inherits DbContextPage
@(order.ShipName)
@(order.Employee?.FirstName + " " + order.Employee?.LastName)
@order.ShipAddress
@(order.ShipCity), @(order.ShipCountry)
@String.Format("{0:d}", data.BirthDate)
@String.Format("{0:d}", data.HireDate)
@code {
EventConsole console;
IEnumerable orders;
IEnumerable employees;
IEnumerable customers;
TabPosition tabPosition = TabPosition.Top;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
employees = dbContext.Employees.ToList();
customers = dbContext.Customers.ToList();
orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
}
void OnChange(int index)
{
console.Log($"Tab with index {index} was selected.");
}
}
```
### Server render mode
Only selected tab content will be rendered.
```razor
Customers
Orders
Order Details
@code {
int selectedIndex = 0;
}
```
### Client render mode
All tabs will be rendered initially and tab change will be performed completely using JavaScript
```razor
Customers
Orders
Order Details
@code {
int selectedIndex = 0;
}
```
### TabItems modify
Demonstrating modifications to the TabItem collection
```razor
@foreach (var item in items)
{
@item
}
Add Item
Remove Item
@code {
RadzenTabs tabs;
int selectedIndex = 0;
List items = new List { "Customers", "Orders", "Order Details" };
int i = 0;
void AddItem()
{
items.Add($"TabItem{++i}");
tabs.Reload();
}
void RemoveItem()
{
items.RemoveAt(selectedIndex);
if (selectedIndex >= items.Count) selectedIndex = items.Count - 1;
tabs.Reload();
}
}
```
### Tabs overflow
Use the `Overflow` property to control what happens when the tabs do not fit in the available space. `TabsOverflow.Default` shrinks the tabs to their minimum size and lets the tab list overflow, `TabsOverflow.Wrap` wraps them to additional lines, `TabsOverflow.Scroll` scrolls the tab list and `TabsOverflow.Collapse` moves the tabs that do not fit into a dropdown menu opened from a button at the end of the tab list. The selected tab always stays visible.
```razor
@foreach (var i in Enumerable.Range(1, 20))
{
Content of tab @i
}
@code {
TabsOverflow overflow = TabsOverflow.Collapse;
}
```
### Prevent Tab change
Demonstrating how to prevent Tab change
```razor
Tab1
Tab2
@code {
bool disabled = true;
}
```
### Reorder tabs
Set `AllowReorder` to `true` to enable drag and drop reordering of tabs.
```razor
Customers
Orders
Order Details
Products
@code {
EventConsole console;
int selectedIndex = 0;
void OnReorder(TabsReorderEventArgs args)
{
console.Log($"Tab moved from index {args.OldIndex} to index {args.NewIndex}.");
}
}
```