Blazor Tabs

Documentation and examples for using Blazor Bootstrap Tabs components.

Examples#

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the About tab.

razor 
<Tabs>
    <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="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.
razor 
<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>
</Tabs>

Title with Icon#

To customize the tab title, use the TitleTemplate parameter, as demonstrated in the following example.
razor 
<Tabs EnableFadeEffect="true">
    <Tab IsActive="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.
razor 
<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="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".
razor 
<Tabs EnableFadeEffect="true" NavStyle="NavStyle.Pills">
    <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>

Underline#

Use the NavStyle="NavStyle.Underline" parameter to change the tabs to an underlined style.
razor 
<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>

Vertical#

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

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the About tab.

razor 
<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>

Vertical pills#

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the About tab.

razor 
<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>

Vertical underline#

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the About tab.

razor 
<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>

Activate individual tabs#

You can activate individual tabs in several ways. Use predefined methods such as ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.
razor 
<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 = 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.
razor 
<Tabs EnableFadeEffect="true"
      OnShowing="@(args => OnTabShowingAsync(args))"
      OnShown="@(args => OnTabShownAsync(args))"
      OnHiding="@(args => OnTabHidingAsync(args))"
      OnHidden="@(args => OnTabHiddenAsync(args))">
    <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>

<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:

Previous Active Tab:

razor 
<Tabs EnableFadeEffect="true"
OnShowing="@(args => OnTabShowingAsync(args))"
      OnShown="@(args => OnTabShownAsync(args))"
      OnHiding="@(args => OnTabHidingAsync(args))"
      OnHidden="@(args => OnTabHiddenAsync(args))">
    <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>

<p>Current Active Tab: <strong>@activeTabTitle</strong></p>
<p>Previous Active Tab: <strong>@previousActiveTabTitle</strong></p>

@code {
    private string? activeTabTitle;
    private string? previousActiveTabTitle;

    private void OnTabShowingAsync(TabsEventArgs args)
    {
        //activeTabTitle = args.ActiveTabTitle;
        //previousActiveTabTitle = args.PreviousActiveTabTitle;
    }

    private void OnTabShownAsync(TabsEventArgs args)
    {
        activeTabTitle = args.ActiveTabTitle;
        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#

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the About tab.

razor 
<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#

This is the placeholder content for the Marvin Klein tab.
This is the placeholder content for the Vikram Reddy tab.
This is the placeholder content for the Bandita PA tab.
This is the placeholder content for the Daina JJ tab.
Selected customer: Marvin Klein
razor 
<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;
}

Dynamic tabs#

This is the placeholder content for the Marvin Klein tab.
This is the placeholder content for the Vikram Reddy tab.
This is the placeholder content for the Bandita PA tab.
This is the placeholder content for the Daina JJ tab.
razor 
<div class="d-flex flex-column">
    <div>
        <Button Color="ButtonColor.Success" Class="mb-3 float-end" Size="Size.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.
This is the placeholder content for the Marvin Klein tab.
This is the placeholder content for the Vikram Reddy tab.
This is the placeholder content for the Bandita PA tab.
This is the placeholder content for the Daina JJ tab.
razor 
<div class="d-flex flex-column">
    <div>
        <Button Color="ButtonColor.Success" Class="mb-3 float-end" Size="Size.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="Size.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") };
        var 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());
    }
}
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community