MudBlazor - Blazor Component Library

Simple Tab

Content One

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
    <MudTabPanel Text="Tab One">
        <MudText>Content One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Disabled" Disabled="true">
        <MudText>Content Disabled</MudText>
    </MudTabPanel>
</MudTabs>

Centered

Use the Centered prop to keep your tabs in the middle.

<MudTabs Elevation="4" Rounded="true" Centered="true" Color="@Color.Primary">
    <MudTabPanel Text="One"/>
    <MudTabPanel Text="Two"/>
    <MudTabPanel Text="Three"/>
</MudTabs>

Scrolling Tabs

If the total size of all tabs exceeds the total size of the tabs container, buttons will be added for scrolling.
With the AlwaysShowScrollButtons prop, you can display the scroll buttons at all time.

<MudTabs Elevation="4" Rounded="true" Color="@Color.Secondary">
    <MudTabPanel Text="One" />
    <MudTabPanel Text="Two" />
    <MudTabPanel Text="Three" />
    <MudTabPanel Text="Four" />
    <MudTabPanel Text="Five" />
    <MudTabPanel Text="Six" />
    <MudTabPanel Text="Seven" />
    <MudTabPanel Text="Eight" />
    <MudTabPanel Text="Nine" />
    <MudTabPanel Text="Ten" />
    <MudTabPanel Text="Eleven" />
    <MudTabPanel Text="Thirteen" />
</MudTabs>

<MudTabs Elevation="4" Rounded="true" AlwaysShowScrollButtons="true" Color="@Color.Info" Class="mt-4">
    <MudTabPanel Text="One" />
    <MudTabPanel Text="Two" />
    <MudTabPanel Text="Three" />
</MudTabs>

Tabs

API

Simple Tab

Centered

Scrolling Tabs