ASP.NET Core AppBar - Lightweight and Fully Customizable Control

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.

• ASP.NET Core AppBar Size demo.
• ASP.NET Core AppBar Size documentation.

Color

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

• ASP.NET Core AppBar Color demo.
• ASP.NET Core AppBar Color documentation.

Position

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

• ASP.NET Core AppBar Position documentation.

Sticky

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

• ASP.NET Core AppBar Sticky documentation.

Content alignment

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

• ASP.NET Core AppBar Content Alignment documentation.

Responsive design

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

• ASP.NET Core AppBar Responsive Design documentation.

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