Blazor Tabs
Documentation and examples for using Blazor Bootstrap Tabs components.
Examples #
<Tabs>
<Tab Title="Home" Active="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="About">
<Content>
<p class="mt-3">This is the placeholder content for the <b>About</b> tab.</p>
</Content>
</Tab>
</Tabs>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.<Tabs EnableFadeEffect="true">
<Tab Title="Home" Active="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>Title with Icon #
To customize the tab title, use the TitleTemplate parameter, as demonstrated in the following example.
<Tabs EnableFadeEffect="true">
<Tab Active="true">
<TitleTemplate>
<Icon Name="IconName.HouseFill" /> Home
</TitleTemplate>
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab>
<TitleTemplate>
<Icon Name="IconName.PersonFill" /> Profile
</TitleTemplate>
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab>
<TitleTemplate>
<Icon Name="IconName.PhoneFill" /> Contact
</TitleTemplate>
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>Disable Tab #
Disable specific tabs by adding
Disabled="true" parameter.<Tabs EnableFadeEffect="true">
<Tab Title="Home" Active="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="Projects" Disabled="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Projects</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>Pills #
To transform the tabs into pills, use the parameter
NavStyle="NavStyle.Pills".<Tabs EnableFadeEffect="true" NavStyle="NavStyle.Pills">
<Tab Title="Home" Active="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>Underline #
Use the
NavStyle="NavStyle.Underline" parameter to change the tabs to an underlined style.<Tabs EnableFadeEffect="true" NavStyle="NavStyle.Underline">
<Tab Title="Home" Active="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>Vertical #
Display your tabs vertically by setting the NavStyle parameter to NavStyle.Vertical.
<Tabs NavStyle="NavStyle.Vertical">
<Tab Title="Home" Active="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>Vertical pills #
<Tabs NavStyle="NavStyle.VerticalPills">
<Tab Title="Home" Active="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>Vertical underline #
<Tabs NavStyle="NavStyle.VerticalUnderline">
<Tab Title="Home" Active="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>Activate individual tabs #
You can activate individual tabs in several ways. Use predefined methods such as
ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.<Tabs @ref="tabs" EnableFadeEffect="true">
<Tab Title="Home" Active="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 = default!;
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();
}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)
| Event Name | Description |
|---|---|
OnHiding |
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). |
OnHidden |
This event fires after a new tab is shown (and thus the previous active tab is hidden). |
OnShowing |
This event fires on tab show, but before the new tab has been shown. |
OnShown |
This event fires on tab show after a tab has been shown. |
INFO
If no tab was already active, then the
OnHiding and OnHidden events will not be fired.
<Tabs EnableFadeEffect="true"
OnShowing="@(args => OnTabShowingAsync(args))"
OnShown="@(args => OnTabShownAsync(args))"
OnHiding="@(args => OnTabHidingAsync(args))"
OnHidden="@(args => OnTabHiddenAsync(args))">
<Tab Title="Home" Active="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>
<div>
@foreach (var item in messages)
{
<p>Event: @item.Event, Active Tab: @item.ActiveTabTitle, Previous Tab: @item.PreviousActiveTabTitle </p>
}
</div>
@code {
record TabMessage(string Event, string ActiveTabTitle, string PreviousActiveTabTitle);
List<TabMessage> messages = new List<TabMessage>();
private void OnTabShowingAsync(TabsEventArgs args)
=> messages.Add(new("OnShowing", args.ActiveTabTitle, args.PreviousActiveTabTitle));
private void OnTabShownAsync(TabsEventArgs args)
=> messages.Add(new("OnShown", args.ActiveTabTitle, args.PreviousActiveTabTitle));
private void OnTabHidingAsync(TabsEventArgs args)
=> messages.Add(new("OnHiding", args.ActiveTabTitle, args.PreviousActiveTabTitle));
private void OnTabHiddenAsync(TabsEventArgs args)
=> messages.Add(new("OnHidden", args.ActiveTabTitle, args.PreviousActiveTabTitle));
}Events - Example #
Current Active Tab Name:
Current Active Tab Title:
Previous Active Tab Name:
Previous Active Tab Title:
<Tabs EnableFadeEffect="true"
OnShowing="@(args => OnTabShowingAsync(args))"
OnShown="@(args => OnTabShownAsync(args))"
OnHiding="@(args => OnTabHidingAsync(args))"
OnHidden="@(args => OnTabHiddenAsync(args))">
<Tab Title="Home" Name="HomeTab" Active="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile" Name="ProfileTab">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact" Name="ContactTab">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>
<p>Current Active Tab Name: <strong>@activeTabName</strong></p>
<p>Current Active Tab Title: <strong>@activeTabTitle</strong></p>
<p>Previous Active Tab Name: <strong>@previousActiveTabName</strong></p>
<p>Previous Active Tab Title: <strong>@previousActiveTabTitle</strong></p>
@code {
private string? activeTabName;
private string? activeTabTitle;
private string? previousActiveTabName;
private string? previousActiveTabTitle;
private void OnTabShowingAsync(TabsEventArgs args)
{
//activeTabTitle = args.ActiveTabTitle;
//previousActiveTabTitle = args.PreviousActiveTabTitle;
}
private void OnTabShownAsync(TabsEventArgs args)
{
activeTabName = args.ActiveTabName;
activeTabTitle = args.ActiveTabTitle;
previousActiveTabName = args.PreviousActiveTabName;
previousActiveTabTitle = args.PreviousActiveTabTitle;
}
private void OnTabHidingAsync(TabsEventArgs args)
{
//activeTabTitle = args.ActiveTabTitle;
//previousActiveTabTitle = args.PreviousActiveTabTitle;
}
private void OnTabHiddenAsync(TabsEventArgs args)
{
//activeTabTitle = args.ActiveTabTitle;
//previousActiveTabTitle = args.PreviousActiveTabTitle;
}
}Methods: Set active tab OnAfterRender #
<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;
}
}
}
}Tab: OnClick #
Selected customer: Marvin Klein
<Tabs>
@foreach (var customer in customers)
{
<Tab Title="@customer.CustomerName"
Active="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;
}Dynamic tabs #
<div class="d-flex flex-column">
<div>
<Button Color="ButtonColor.Success" Class="mb-3 float-end" Size="ButtonSize.ExtraSmall" @onclick="AddCustomer">+ Add customer</Button>
</div>
<Card>
<CardBody>
<Tabs @ref="tabsRef">
@foreach (var customer in customers)
{
<Tab Title="@customer.CustomerName">
<Content>
<div class="mt-3">
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
</div>
</Content>
</Tab>
}
</Tabs>
</CardBody>
</Card>
</div>
@code {
Tabs tabsRef = default!;
private List<Customer> customers = default!;
protected override void OnInitialized()
{
customers = new() { new(1, "Marvin Klein"), new(2, "Vikram Reddy"), new(3, "Bandita PA"), new(4, "Daina JJ") };
}
private void AddCustomer()
{
var count = customers.Count;
var customer = new Customer(count + 1, $"Customer {count + 1}");
customers.Add(customer);
tabsRef.ShowRecentTab();
}
}Remove dynamic tabs #
In the following example, we are deleting tabs dynamically. Ensure that the @key parameter is added with unique value.
<div class="d-flex flex-column">
<div>
<Button Color="ButtonColor.Success" Class="mb-3 float-end" Size="ButtonSize.ExtraSmall" @onclick="AddCustomer">+ Add customer</Button>
</div>
<Card>
<CardBody>
<Tabs @ref="tabsRef">
@foreach (var customer in customers)
{
<Tab @key="@customer?.GetHashCode()"
Title="@customer.CustomerName"
Name="@($"{customer.CustomerId}")">
<Content>
<div class="p-1">
<div class="mt-3">
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
</div>
<div>
<Button Color="ButtonColor.Danger" Class="mt-3" Size="ButtonSize.ExtraSmall" @onclick="() => RemoveCustomer(customer)">Remove tab</Button>
</div>
</div>
</Content>
</Tab>
}
</Tabs>
</CardBody>
</Card>
</div>
@code {
Tabs tabsRef = default!;
int count = 1;
private List<Customer> customers = default!;
protected override void OnInitialized()
{
customers = new() { new(1, "Marvin Klein"), new(2, "Vikram Reddy"), new(3, "Bandita PA"), new(4, "Daina JJ") };
count = customers.Count;
}
private void AddCustomer()
{
count++;
var customer = new Customer(count, $"Customer {count}");
customers.Add(customer);
tabsRef.ShowRecentTab();
}
private void RemoveCustomer(Customer customer)
{
customers.Remove(customer);
tabsRef.RemoveTabByName(customer.CustomerId.ToString());
}
}