ASP.NET MVC 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 MVC 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 MVC AppBar code example

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

@using Syncfusion.EJ2
@{
    ViewBag.Title = "DefaultFunctionalities";
}

@section ControlsSection{
    <div class="control-section">
        @(Html.EJS().AppBar("defaultAppBar").ColorMode(AppBarColor.Primary).ContentTemplate(@<div>
            @Html.EJS().Button("defaultButtonMenu").CssClass("e-inherit").IconCss("e-icons e-menu").Render()
            <span class="regular" style="margin:0 5px">EJ2 AppBar</span>
            <div class="e-appbar-spacer"></div>
            @Html.EJS().Button("defaultButtonLogin").CssClass("e-inherit").Content("FREE TRIAL").Render()
        </div>).Render())
    </div>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using EJ2MVCSampleBrowser.Models;
using MVCSampleBrowser.Models;

namespace EJ2MVCSampleBrowser.Controllers.AppBar
{
    public partial class AppBarController : Controller
    {
        // GET: DefaultFunctionalities
        public ActionResult 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