ASP.NET Core AppBar - Lightweight and Fully Customizable Control

Size

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

• Size demo
• Size documentation

Color

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

• Color demo
• Color documentation

Position

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

• Position documentation

Sticky

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

• Sticky documentation

Content alignment

The ASP.NET Core AppBar component aligns the content using a spacer and separator.

• Content alignment documentation

Responsive design

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

• Responsive design documentation

Separator

A separator is a vertical line that visually separates or groups items in an AppBar.

• Separator documentation

ASP.NET Core AppBar code example

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

@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <ejs-appbar id="defaultAppBar" colorMode="Primary">
            <e-content-template>
                <ejs-button aria-label="menu" id="defaultButtonMenu" cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
                <span class="regular" style="margin:0 5px">EJ2 AppBar</span>
                <div class="e-appbar-spacer"></div>
                <ejs-button id="defaultButtonLogin" cssClass="e-inherit" content="FREE TRIAL"></ejs-button>
            </e-content-template>
        </ejs-appbar>
    </div>
 }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using EJ2CoreSampleBrowser.Models;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;
using Syncfusion.EJ2.Buttons;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class AppBarController : Controller
    {
       
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
      
    }
}

Other supported frameworks

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

• Blazor AppBar

• JavaScript AppBar

• Angular AppBar

• React AppBar

• Vue AppBar