Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Tabs

See Tabs API for parameter documentation.

Simple Tab

Tab One
Tab Two
Tab Three
Tab Disabled

Content One

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

One
Two
Three
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 excides 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.

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Thirteen
One
Two
Three
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>

Custom Scroll Icons

The icons can be changed with the PrevIcon and NextIcon property.

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Thirteen
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTabs Elevation="4" Rounded="true" Color="@Color.Success" PrevIcon="@Icons.Filled.SkipPrevious" NextIcon="@Icons.Filled.SkipNext">
    <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>

Tabs Position

The position of the tab toolbar can be changed with the Position property.

Top

Left

Right

Bottom

Item One
Item Two
Item Three

Content One

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSelect Variant="Variant.Outlined" Label="Tabs Position" Dense="true" Margin="Margin.Dense" T="@Position" @bind-Value="Position">
    <MudSelectItem T="Position" Value="@Position.Top">Top</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.Left">Left</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.Right">Right</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.Bottom">Bottom</MudSelectItem>
</MudSelect>

<MudTabs Outlined="true" Position="@Position" Rounded="true" Border="true"
    ApplyEffectsToContainer="true" Class="mt-8" PanelClass="pa-6">
    <MudTabPanel Text="Item One">
        <MudText>Content One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
</MudTabs>
@code {
    public Position Position { get; set; } = Position.Left;

    private void OnSelectedValue(Position value)
    {
        switch (value)
        {
            case Position.Top:
                Position = Position.Top;
                break;
            case Position.Left:
                Position = Position.Left;
                break;
            case Position.Right:
                Position = Position.Right;
                break;
            case Position.Bottom:
                Position = Position.Bottom;
                break;
        }
    }
}

Icon Tabs

Icons can be used in addition to regular text in the tabs.

Api
Bug Report
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTabs Outlined="true">
    <MudTabPanel Text="Api" Icon="@Icons.Material.Filled.Api"/>
    <MudTabPanel Icon="@Icons.Material.Filled.Build"/>
    <MudTabPanel Text="Bug Report" Icon="@Icons.Material.Filled.BugReport"/>
</MudTabs>

With Badges

Badges can be be applied to both icons and texts in the same way.

live
...
99+
API !
Build 1
Bugs 0
API S
Build ...
Bugs N
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTabs Elevation="2" Rounded="true" Centered="true">
    <MudTabPanel Icon="@Icons.Material.Filled.Api" BadgeData='"live"' BadgeColor="Color.Info" />
    <MudTabPanel Icon="@Icons.Material.Filled.Build" BadgeData='"..."' />
    <MudTabPanel Icon="@Icons.Material.Filled.BugReport" BadgeData='"99+"' BadgeColor="Color.Error" />
</MudTabs>

<MudTabs Elevation="2" Rounded="true" Centered="true" Class="my-6" Color="Color.Dark">
    <MudTabPanel Icon="@Icons.Material.Filled.Api" Text="API" BadgeData='"!"' BadgeColor="Color.Error" />
    <MudTabPanel Icon="@Icons.Material.Filled.Build" Text="Build" BadgeData="1" BadgeColor="Color.Success" />
    <MudTabPanel Icon="@Icons.Material.Filled.BugReport" Text="Bugs" BadgeData="0" />
</MudTabs>

<MudTabs Elevation="2" Rounded="true" Centered="true">
    <MudTabPanel Text="API" BadgeData='"S"' />
    <MudTabPanel Text="Build" BadgeData='"..."' BadgeColor="Color.Dark" />
    <MudTabPanel Text="Bugs" BadgeData='"N"' />
</MudTabs>

Tooltip Tabs

Item One
ToolTip One
Item Two
ToolTip Two
Item Three
ToolTip Three

Item One

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTabs Elevation="1" Rounded="true" PanelClass="pa-6">
    <MudTabPanel Text="Item One" ToolTip="ToolTip One">
        <MudText>Item One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two" ToolTip="ToolTip Two">
        <MudText>Item Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three" ToolTip="ToolTip Three">
        <MudText>Item Three</MudText>
    </MudTabPanel>
</MudTabs>

Set Active Panel

One
Two
Three

Set Active by Index

Set Active by Instance

Set Active by TabPanel ID

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTabs Elevation="1" Rounded="true" @ref="tabs">
    <MudTabPanel Text="One" @ref="panel01" ID="@("pn_one")" />
    <MudTabPanel Text="Two" @ref="panel02" ID="@("pn_two")" />
    <MudTabPanel Text="Three" @ref="panel03" ID="@("pn_three")" />
</MudTabs>


<MudText GutterBottom="true" Align="Align.Center" Class="mt-8"><b>Set Active by Index</b></MudText>
<div class="d-flex justify-center">
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick="() => Activate(0)">Index 0</MudButton>
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick="() => Activate(1)" Class="mx-2">Index 1</MudButton>
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick="() => Activate(2)">Index 2</MudButton>
</div>
<MudText GutterBottom="true" Align="Align.Center" Class="mt-4"><b>Set Active by Instance</b></MudText>
<div class="d-flex justify-center">
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick="() => Activate(panel01)">Item One</MudButton>
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick="() => Activate(panel02)" Class="mx-2">Item Two</MudButton>
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick="() => Activate(panel03)">Item Three</MudButton>
</div>
<MudText GutterBottom="true" Align="Align.Center" Class="mt-4"><b>Set Active by TabPanel ID</b></MudText>
<div class="d-flex justify-center">
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick='() => Activate("pn_one")'>Item One</MudButton>
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick='() => Activate("pn_two")' Class="mx-2">Item Two</MudButton>
    <MudButton Variant="@Variant.Filled" Color="Color.Primary" OnClick='() => Activate("pn_three")'>Item Three</MudButton>
</div>
@code {
    MudTabs tabs;
    MudTabPanel panel01;
    MudTabPanel panel02;
    MudTabPanel panel03;

    void Activate(int index)
    {
        tabs.ActivatePanel(index);
    }

    void Activate(MudTabPanel panel)
    {
        tabs.ActivatePanel(panel);
    }

    void Activate(object id)
    {
        tabs.ActivatePanel(id);
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙