Blazor Tabs

Documentation and examples for how to use Blazor Bootstrap Tabs components.

Examples#

<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 make tabs fade in, add EnableFadeEffect="true" parameter. The first tab pane must also have IsActive="true" parameter to make the initial content visible.
<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 TitleTemplate, as shown in the below example.
<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.
<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#

Use NavStyle="NavStyle.Pills" parameter to change the tabs to pills.
<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>

Activate individual tabs#

You can activate individual tabs in several ways. Use predefined methods ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.
<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();
}

Events#

When showing a new tab, the events fire in the following order:

1. OnHiding (on the current active tab)
2. OnShowing (on the to-be-shown tab)
3. OnHidden (on the previous active tab, the same one as for the OnHiding event)
4. OnShown (on the newly-active just-shown tab, the same one as for 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" 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:

<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;
    }
}

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;
            }
        }
    }
}