MudBlazor

Community Support

Discord

GitHub Discussions

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

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

App Bar

App bar is used to display actions, branding, navigation and screen titles. Keeping the app bar persistent while browsing different pages will ease navigation and access to actions for your users.

See App Bar API for parameter documentation.

Regular App Bar

App bars have two types: regular and contextual action bar. Below is an example of a regular app bar.

A contextual action bar is something that will provide actions for a selected item on the page.

A top bar can transform into a contextual action bar and be dismissed at any time.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAppBar Color="Color.Primary" Fixed="false">
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

Elevation

You can change the App Bar elevation, with values from 0-24

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAppBar Color="Color.Primary" Fixed="false" Elevation="0">
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>

Dense

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudAppBar Color="Color.Primary" Fixed="false" Dense="true">
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" />
    <MudSpacer />
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" />
</MudAppBar>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙