Tabs

Documentation and examples for how to use Tabs component.

API Documentation

How it works #

The Tabs component organizes content into multiple panels, each accessible by clicking its corresponding tab. This allows users to switch between different sections without leaving the page.

How to use:
  1. Add the Tabs component to your page.
  2. Define one or more Tab child components inside Tabs, each with a Title and content.
  3. Optionally, set IsActive="true" on the tab you want to be selected by default.
This demo shows a basic tabbed interface with four tabs. Only one tab's content is visible at a time, and users can switch between them by clicking the tab headers.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs>
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Alignment #

The Tabs component supports alignment options to control the position of the tab headers. Use the Alignment parameter to center or right-align the tabs.

How to use:
  1. Set the Alignment parameter on the Tabs component to TabsAlignment.Center or TabsAlignment.Right.
  2. Add your Tab components as usual.
The following demo centers the tab headers using Alignment="TabsAlignment.Center".
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Center">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This demo shows the tab headers aligned to the right using Alignment="TabsAlignment.Right". Adjust alignment to match your layout needs.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Right">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Sizes #

The Tabs component can be displayed in different sizes to fit your design. Use the Size parameter to set the tab size to small, medium, or large.

How to use:
  1. Set the Size parameter on the Tabs component to TabsSize.Small, TabsSize.Medium, or TabsSize.Large.
  2. Add your Tab components as needed.
This demo uses Size="TabsSize.Small" to render compact tabs.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Size="TabsSize.Small">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This demo uses Size="TabsSize.Medium" for medium-sized tabs, suitable for most layouts.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Size="TabsSize.Medium">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This demo uses Size="TabsSize.Large" for prominent, easy-to-click tabs.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Size="TabsSize.Large">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Styles #

The Tabs component supports different visual styles. Use the Type parameter to switch between default, boxed, and rounded tab styles.

How to use:
  1. Set the Type parameter on the Tabs component to TabsType.Boxed or TabsType.Rounded.
  2. Add your Tab components as usual.
This demo uses Type="TabsType.Boxed" for boxed tab headers.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Boxed">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This demo uses Type="TabsType.Rounded" for rounded tab headers, giving a softer appearance.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Rounded">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Full width #

To make the Tabs component span the entire width of its container, set the IsFullWidth parameter to true.

How to use:
  1. Add the Tabs component and set IsFullWidth="true".
  2. Add your Tab components as needed.
This demo shows tabs stretched to fill the available horizontal space.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs IsFullWidth="true">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Combined #

You can combine alignment, style, size, and full-width options to create custom tab layouts. Set multiple parameters on the Tabs component to achieve the desired appearance.

How to use:
  1. Set any combination of Alignment, Type, Size, and IsFullWidth on the Tabs component.
  2. Add your Tab components as usual.
This demo combines centered alignment and boxed style.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Center" Type="TabsType.Boxed">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This demo combines boxed style with full-width tabs.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Boxed" IsFullWidth="true">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This demo combines rounded style with full-width tabs.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Type="TabsType.Rounded" IsFullWidth="true">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>
This demo combines centered alignment, boxed style, and medium size for a distinct look.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs Alignment="TabsAlignment.Center" Type="TabsType.Boxed" Size="TabsSize.Medium">
    <Tab Title="Pictures" IsActive="true">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

Methods #

Name Return type Description
GetActiveTab() Tab Gets the active tab.
RemoveTabByIndex(int tabIndex) - Removes the tab by index.
RemoveTabByName(string tabName) - Removes the tab by name.
ShowFirstTab() - Selects the first tab and show its associated pane.
ShowLastTab() - Selects the last tab and show its associated pane.
ShowTabByIndex(int tabIndex) Tab Selects the tab by index and show its associated pane.
ShowTabByName(string tabName) Tab Selects the tab by name and show its associated pane.
The Tabs component exposes methods for programmatically controlling tab selection and management. You can use a @ref to access these methods from your code.

How to use:
  1. Add @ref="tabsRef" to your Tabs component.
  2. Call methods like ShowFirstTab(), ShowTabByIndex(index), or ShowTabByName(name) from your code to change the active tab.
  3. Use RemoveTabByIndex or RemoveTabByName to remove tabs dynamically.
This demo provides buttons to switch between tabs and demonstrates how to control tabs from code.
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.
RAZOR
<Tabs @ref="tabsRef">
    <Tab Title="Home">
        <div class="pt-3">This is the placeholder content for the <b>Home</b> tab.</div>
    </Tab>
    <Tab Title="Profile">
        <div class="pt-3">This is the placeholder content for the <b>Profile</b> tab.</div>
    </Tab>
    <Tab Title="Contact">
        <div class="pt-3">This is the placeholder content for the <b>Contact</b> tab.</div>
    </Tab>
    <Tab Title="Products" Name="Products">
        <div class="pt-3">This is the placeholder content for the <b>Products</b> tab.</div>
    </Tab>
    <Tab Title="FAQs" Name="FAQs">
        <div class="pt-3">This is the placeholder content for the <b>FAQs</b> tab.</div>
    </Tab>
    <Tab Title="About">
        <div class="pt-3">This is the placeholder content for the <b>About</b> tab.</div>
    </Tab>
</Tabs>

<Buttons Class="mt-5">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowFirstTab()">First Tab</Button>
    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowTabByIndex(1)">Second Tab</Button>
    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowTabByIndex(2)">Third Tab</Button>
    <Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowProductsTab">Products Tab</Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowFAQsTab">FAQs Tab</Button>
    <Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="() => tabsRef.ShowLastTab()">Last Tab</Button>
</Buttons>

@code{
    Tabs tabsRef = default!;

    private void ShowProductsTab() => tabsRef.ShowTabByName("Products");
    private void ShowFAQsTab() => tabsRef.ShowTabByName("FAQs");
}

Events #

When displaying a new tab, the events fire in the following sequence:
Name Event args Description
OnHidden TabEventArgs This event fires after a new tab is shown (and thus the previous active tab is hidden).
OnShown TabEventArgs This event fires on tab show after a tab has been shown.
OnTabChanged TabsEventArgs This event fires when the user clicks the corresponding tab and the tab is displayed.
The Tabs component provides events to respond to tab changes. You can handle OnHidden, OnShown, and OnTabChanged to perform actions when tabs are switched.

How to use:
  1. Add OnHidden, OnShown, or OnTabChanged event handlers to your Tabs component.
  2. Implement the corresponding methods in your code to handle tab events and update your UI or state as needed.
  3. Use the event arguments to access information about the active or previous tab.
This demo logs tab events and displays them in a list, showing how to react to tab changes in your application.
This is the placeholder content for the Pictures tab.
This is the placeholder content for the Music tab.
This is the placeholder content for the Videos tab.
This is the placeholder content for the Documents tab.
RAZOR
<Tabs @ref="tabsRef"
      OnHidden="OnHidden"
      OnShown="OnShown"
      OnTabChanged="OnTabChanged">
    <Tab Title="Pictures">
        <div class="pt-3">This is the placeholder content for the <b>Pictures</b> tab.</div>
    </Tab>
    <Tab Title="Music">
        <div class="pt-3">This is the placeholder content for the <b>Music</b> tab.</div>
    </Tab>
    <Tab Title="Videos">
        <div class="pt-3">This is the placeholder content for the <b>Videos</b> tab.</div>
    </Tab>
    <Tab Title="Documents">
        <div class="pt-3">This is the placeholder content for the <b>Documents</b> tab.</div>
    </Tab>
</Tabs>

<div class="mt-5" style="max-height:200px;overflow-y:auto;">
    @foreach (var item in messages)
    {
        <p>Event: @item.Event, Message: @item.Message, UTC Time: @item.TimeStamp</p>
    }
</div>

@code {
    Tabs tabsRef = default!;
    List<TabMessage> messages = new List<TabMessage>();

    private void OnHidden(TabEventArgs args) => messages.Add(new("OnHidden", $"Tab Title: {args.Tab.Title!}", DateTime.UtcNow));
    private void OnShown(TabEventArgs args) => messages.Add(new("OnShown", $"Tab Title: {args.Tab.Title!}", DateTime.UtcNow));
    private void OnTabChanged(TabsEventArgs args) => messages.Add(new("OnTabChanged", $"Active Tab Title: {args.ActiveTab.Title!}, Previous Active Tab: {args.PreviousActiveTab.Title!}", DateTime.UtcNow));

    private record TabMessage(string Event, string Message, DateTime TimeStamp);
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!