Blazor AppBar - Lightweight and Fully Customizable Component

Size

Display the AppBar with predefined sizes: normal, longer, and shorter. The size of an AppBar can be changed using the regular, prominent, and dense properties.

• Blazor AppBar Size demo.
• Blazor AppBar Size documentation.

Color

The AppBar has predefined background colors for different visual representations: light, dark, primary, and inherit.

• Blazor AppBar Color demo.
• Blazor AppBar Color documentation.

Position

A row of content can be aligned horizontally at the top or bottom of the AppBar.

• Blazor AppBar Position documentation.

Sticky

AppBar can stick to the top of a page while scrolling the content.

• Blazor AppBar Sticky documentation.

Content alignment

The Blazor AppBar component aligns the content using the spacer and separator.

• Blazor AppBar Content Alignment documentation.

Responsive design

The AppBar layout will adjust automatically to the current screen size.

• Blazor AppBar Responsive Design documentation.

AppBar code example

Easily get started with the Blazor AppBar using a few simple lines of C# code, as demonstrated below. Also explore our Blazor AppBar example, which shows how to render and configure the Blazor AppBar.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="regular">Blazor AppBar</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
</SfAppBar>

Other supported frameworks

The AppBar component is also available in Angular, React, Vue, and JavaScript frameworks. Check out the component on other platforms using these links:

• JavaScript AppBar

• Angular AppBar

• React AppBar

• Vue AppBar