Blazor AppBar Overview
The Blazor AppBar component helps you build navigation bars for your application seamlessly. This article explains how to start using the component and describes its features.
The AppBar component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor AppBar
- Add the
<TelerikAppBar>tag to a Razor file. - Use the
<AppBarSection>child tag to add content to the AppBar component. - (optional) Use spacers or separators to add visual distinction between the sections in the AppBar.
Basic configuration of the Telerik AppBar
<TelerikAppBar>
<AppBarSection>
<span>Company Logo</span>
</AppBarSection>
<AppBarSpacer></AppBarSpacer>
<AppBarSection>
<span>Our Products</span>
</AppBarSection>
<AppBarSeparator></AppBarSeparator>
<AppBarSection>
<span>Our Mission</span>
</AppBarSection>
<AppBarSeparator></AppBarSeparator>
<AppBarSection>
<span>Contact Us</span>
</AppBarSection>
<AppBarSpacer></AppBarSpacer>
<AppBarSection>
<TelerikSvgIcon Icon="@SvgIcon.User"></TelerikSvgIcon>
</AppBarSection>
<AppBarSeparator></AppBarSeparator>
<AppBarSection>
<TelerikSvgIcon Icon="@SvgIcon.Logout"></TelerikSvgIcon>
</AppBarSection>
</TelerikAppBar>
AppBar Sections
Use the AppBar Sections to render arbitrary HTML content to match the UI and UX needs of your application. Read more about the Blazor AppBar sections...
Content Dividers
The AppBar features separators and spacers that can visually divide the component items. Read more about the Blazor AppBar separators and spacers..
Positioning
You can control the position of the AppBar and how the component behaves according to the flow of the page. Read more about the Blazor AppBar positioning..
AppBar Parameters
The Blazor AppBar provides parameters to configure the component. Also check the AppBar API Reference for a full list of properties.
| Parameter | Type | Description |
|---|---|---|
Position |
AppBarPosition ( None) |
The position of the AppBar on the page. Read more about AppBar positioning. |
PositionMode |
AppBarPosition ( Static) |
Sets how the AppBar is positioned according to the flow of the document. Read more about AppBar positioning. |
Styling and Appearance
The following parameters enable you to customize the appearance of the Blazor AppBar:
| Parameter | Type | Description |
|---|---|---|
Class |
string |
The CSS class to be rendered on the main wrapping element of the AppBar component, which is <div class="k-appbar">. Use for styling customizations. |
Height |
string |
The height of the AppBar. |
ThemeColor |
Telerik.Blazor.ThemeConstants.AppBar.ThemeColor |
Adjust the color of the AppBar |
Width |
string |
The width of the AppBar. |
You can find more information for customizing the AppBar appearance in the Appearance article.
AppBar Reference and Methods
To execute AppBar methods, obtain reference to the component instance with @ref.
| Method | Description |
|---|---|
Refresh |
Use the method to programmatically re-render the AppBar. |
<TelerikButton OnClick="@RefreshAppBar">Refresh AppBar</TelerikButton>
<TelerikAppBar @ref="AppBarRef" />
@code {
private TelerikAppBar AppBarRef { get; set; }
private void RefreshAppBar()
{
AppBarRef.Refresh();
}
}