Skip to main content

Blazor Tabs

Documentation and examples for using Blazor Bootstrap Tabs components.

Tabs Parameters

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.1.0.0
EnableFadeEffectboolGets or sets the tabs fade effect.false1.0.0
NavStyleNavStyleGet or sets the nav style.NavStyle.Tabs1.0.0

Tabs Methods

NameDescriptionAdded Version
InitializeRecentTab(bool showTab)Initializes the most recently added tab, optionally displaying it.1.11.0
ShowFirstTabAsync()Selects the first tab and show its associated pane.1.0.0
ShowLastTabAsync()Selects the last tab and show its associated pane.1.0.0
ShowTabByIndexAsync(int tabIndex)Selects the tab by index and show its associated pane.1.0.0
ShowTabByNameAsync(string tabName)Selects the tab by name and show its associated pane.1.0.0

Tabs Callback Events

EventDescriptionAdded Version
OnHiddenThis event fires after a new tab is shown (and thus the previous active tab is hidden).1.0.0
OnHidingThis event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).1.0.0
OnShowingThis event fires on tab show, but before the new tab has been shown.1.0.0
OnShownThis event fires on tab show after a tab has been shown.1.0.0

Tab Parameters

NameTypeDescriptionRequiredDefaultAdded Version
ContentRenderFragmentSpecifies the content to be rendered inside the tab.✔️1.0.0
DisabledboolGets or sets the disabled.false1.0.0
IsActiveboolGets or sets the active tab.false1.0.0
NamestringGets or sets the tab name.1.0.0
TitlestringGets or sets the tab title.1.0.0
TitleTemplateRenderFragmentGets or sets the tab title template.1.0.0
Note

Either Title or TitleTemplate is required.

Tab Callback Events

EventDescriptionAdded Version
OnClickThis event fires when the user clicks the corresponding tab button and the tab is displayed.1.11.0

Examples

Tabs

Blazor Tabs Component - Examples
<Tabs>
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
</Tabs>

See demo here.

Fade effect

To create a fade-in effect for tabs, add the EnableFadeEffect="true" parameter. Additionally, set the IsActive="true" parameter on the first tab pane to display its content initially.

Blazor Tabs Component - Fade effect
<Tabs EnableFadeEffect="true">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
</Tabs>

See demo here.

Title with icon

To customize the tab title, use the TitleTemplate parameter, as demonstrated in the following example.

Blazor Tabs Component - Title with icon
<Tabs EnableFadeEffect="true">
<Tab IsActive="true">
<TitleTemplate>
<Icon Name="IconName.HouseFill" /> Home
</TitleTemplate>
<Content>
<p class="mt-2">
<b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab>
<TitleTemplate>
<Icon Name="IconName.PersonFill" /> Profile
</TitleTemplate>
<Content>
<p class="mt-2">
<b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab>
<TitleTemplate>
<Icon Name="IconName.PhoneFill" /> Contact
</TitleTemplate>
<Content>
<p class="mt-2">
<b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
</Tabs>

See demo here.

Disable Tab

Disable specific tabs by adding Disabled="true" parameter.

Blazor Tabs Component - Disable Tab
<Tabs EnableFadeEffect="true">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Projects" Disabled="true">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Projects tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
</Tabs>

See demo here.

Pills

To transform the tabs into pills, use the parameter NavStyle="NavStyle.Pills".

Blazor Tabs Component - Pills
<Tabs EnableFadeEffect="true" NavStyle="NavStyle.Pills">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-2">
<b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
</p>
</Content>
</Tab>
</Tabs>

See demo here.

Underline

Use the NavStyle="NavStyle.Underline" parameter to change the tabs to an underlined style.

Blazor Tabs Component - Underline
<Tabs EnableFadeEffect="true" NavStyle="NavStyle.Underline">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>

See demo here.

Vertical

Display your tabs vertically by setting the NavStyle parameter to NavStyle.Vertical.

Blazor Tabs Component - Vertical
<Tabs NavStyle="NavStyle.Vertical">
<Tab Title="Home" IsActive="true">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
<Tab Title="About">
<Content>
<p class="ms-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>

See demo here.

Vertical pills

Blazor Tabs Component - Vertical pills
<Tabs NavStyle="NavStyle.VerticalPills">
<Tab Title="Home" IsActive="true">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
<Tab Title="About">
<Content>
<p class="ms-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>

See demo here.

Vertical underline

Blazor Tabs Component - Vertical underline
<Tabs NavStyle="NavStyle.VerticalUnderline">
<Tab Title="Home" IsActive="true">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="ms-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
<Tab Title="About">
<Content>
<p class="ms-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>

See demo here.

Activate individual tabs

You can activate individual tabs in several ways. Use predefined methods such as ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.

Blazor Tabs Component - Activate individual tabs
<Tabs @ref="tabs" EnableFadeEffect="true">
<Tab Title="Home" IsActive="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
<Tab Title="Products" Name="Products">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Products</b> tab.</p>
</Content>
</Tab>
<Tab Title="FAQs" Name="FAQ">
<Content>
<p class="mt-3">This is the placeholder content for the <b>FAQs</b> tab.</p>
</Content>
</Tab>
<Tab Title="About">
<Content>
<p class="mt-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>

<Button Color="ButtonColor.Primary" @onclick="ShowFirstTabAsync">First Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowSecondTabAsync">Second Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowThirdTabAsync">Third Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowProductsTabAsync">Products Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowFaqsAsync">FAQs Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowLastTabAsync">Last Tab</Button>
@code{
Tabs tabs;

private async Task ShowFirstTabAsync() => await tabs.ShowFirstTabAsync();
private async Task ShowSecondTabAsync() => await tabs.ShowTabByIndexAsync(1);
private async Task ShowThirdTabAsync() => await tabs.ShowTabByIndexAsync(2);
private async Task ShowProductsTabAsync() => await tabs.ShowTabByNameAsync("Products");
private async Task ShowFaqsAsync() => await tabs.ShowTabByNameAsync("FAQ");
private async Task ShowLastTabAsync() => await tabs.ShowLastTabAsync();
}

See demo here.

Events

When displaying a new tab, the events fire in the following sequence:

  1. OnHiding (on the currently active tab)
  2. OnShowing (on the tab that is about to be displayed)
  3. OnHidden (on the previously active tab, which is the same one that triggered the OnHiding event)
  4. OnShown (on the newly activated tab that has just been displayed, which is the same one that triggered the OnShowing event)
Note

If no tab was already active, then the OnHiding and OnHidden events will not be fired.

See demo here.

Methods: Set active tab OnAfterRender

Blazor Tabs Component - Activate individual tabs
<Tabs @ref="tabs">
<Tab Title="Home">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
<Tab Title="About">
<Content>
<p class="mt-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>
@code {
Tabs tabs = default!;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
string userDefaultPreferredTab = "Profile"; // Get the value from Service / API

switch (userDefaultPreferredTab)
{
case "Home":
await tabs.ShowTabByIndexAsync(0);
break;
case "Profile":
await tabs.ShowTabByIndexAsync(1);
break;
case "Contact":
await tabs.ShowTabByIndexAsync(2);
break;
case "About":
await tabs.ShowTabByIndexAsync(3);
break;
default:
await tabs.ShowTabByIndexAsync(0);
break;
}
}
}
}

See demo here.

Tab: OnClick

Blazor Tabs Component - Return object on tab switch
<Tabs>
@foreach (var customer in customers)
{
<Tab Title="@customer.CustomerName"
IsActive="selectedCustomer.CustomerId == customer.CustomerId"
OnClick="(args) => OnTabClick(args, customer)">
<Content>
<div class="mt-3">
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
</div>
</Content>
</Tab>
}
</Tabs>

@if (selectedCustomer is not null)
{
<div class="mt-3">Selected customer: <b>@selectedCustomer.CustomerName</b></div>
}
@code {
private List<Customer> customers = new() { new(1, "Marvin Klein"), new(2, "Vikram Reddy"), new(3, "Bandita PA"), new(4, "Daina JJ") };

private Customer selectedCustomer = default!;

protected override void OnInitialized() => selectedCustomer = customers.First();

private void OnTabClick(TabEventArgs args, Customer customer) => selectedCustomer = customer;
}

See demo here.

Dynamic tabs

Blazor Tabs Component - Dynamic tabs
<Tabs @ref="tabs">
@foreach (var customer in customers)
{
<Tab Title="@customer.CustomerName"
OnClick="(args) => OnTabClick(args, customer)">
<Content>
<div class="mt-3">
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
</div>
</Content>
</Tab>
}
</Tabs>

@if (selectedCustomer is not null)
{
<div class="mt-3">Selected customer: <b>@selectedCustomer.CustomerName</b></div>
}

<Button Color="ButtonColor.Success" Class="mt-3" @onclick="AddCustomer">Add customer</Button>
@code {
Tabs tabs = default!;

private List<Customer> customers = new() { new(1, "Marvin Klein"), new(2, "Vikram Reddy"), new(3, "Bandita PA"), new(4, "Daina JJ") };

private Customer selectedCustomer = default!;

protected override void OnInitialized() => selectedCustomer = customers.Last();

private void AddCustomer()
{
var count = customers.Count;
var customer = new Customer(count + 1, $"Customer {count + 1}");
customers.Add(customer);
//selectedCustomer = customer; NOTE: this line is not required
tabs.InitializeRecentTab(showTab: true);
}

private void OnTabClick(TabEventArgs args, Customer customer) => selectedCustomer = customer;
}

See demo here.