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


The <AppBarSection> is a template-based component that allows you to render HTML content or Razor components in the AppBar component.

Render content only inside the <AppBarSection> tag, otherwise it will display outside the AppBar component.

AppBar Section Parameters

The nested AppBarSection tag exposes parameters:

Parameter Type and Default Value Description
Class string The CSS class that will be rendered on the main wrapping element of the AppBar section. You could use that class to cascade styles.
Visible bool
Specifies if the section will be visible in the AppBar.

The Telerik AppBar sections with its parameter

@* The AppBar sections with its parameters *@

    .products-section-class {
        font-weight: bolder;

<TelerikButton OnClick="@(() => isSectionVisible = !isSectionVisible)">Toggle the visibility of the Our Mission section</TelerikButton>

<br />

    <AppBarSection Class="products-section-class">
        <span>Our Products</span>

    <AppBarSection Visible="@isSectionVisible">
        <span>Our Mission</span>

    private bool isSectionVisible { get; set; } = true;

See Also

In this article