New to Telerik UI for Blazor? Download free 30-day trial

Appearance Settings

This article outlines the available AppBar parameters, which control its appearance.


You can change the color of the AppBar by setting the ThemeColor parameter to a member of the Telerik.Blazor.ThemeConstants.AppBar.ThemeColor class:

Class members Manual declarations
Base base
Primary primary
Secondary secondary
Tertiary tertiary
Info info
Success success
Warning warning
Error error
Dark dark
Light light
Inverse inverse

The built-in AppBar colors

<TelerikDropDownList Data="@ThemeColors" @bind-Value="@SelectedColor" Width="150px"></TelerikDropDownList>

<TelerikAppBar ThemeColor="@SelectedColor">
        <span>Our Logo</span>

    <AppBarSpacer Size="25%"></AppBarSpacer>

        <span>Our Products</span>

    <AppBarSpacer Size="50px"></AppBarSpacer>

        <span>Our Mission</span>


        <TelerikSvgIcon Icon="@SvgIcon.User"></TelerikSvgIcon>


        <TelerikSvgIcon Icon="@SvgIcon.Logout"></TelerikSvgIcon>

@code {
    private string SelectedColor { get; set; } = "base";

    private List<string> ThemeColors { get; set; } = new List<string>()
In this article