Blazor Tabs

Documentation and examples for how to use 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.

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

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.

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

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.

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

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 Projects tab.

This is the placeholder content for the Contact tab.

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

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.

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

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 Products tab.

This is the placeholder content for the FAQs tab.

This is the placeholder content for the About tab.

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

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.

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

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.

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