Angular AppBar - Lightweight and Fully Customizable Component

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 Angular 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

Angular AppBar code example

Easily get started with the Angular AppBar using a few simple lines of HTML and TS code, as demonstrated below. Also, explore our Angular AppBar example, which shows how to render and configure an AppBar in Angular.

<div class="control-section">
    <ejs-appbar colorMode="Primary">
        <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span class="regular" style="margin:0 5px">Angular AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button cssClass="e-inherit">FREE TRIAL</button>
    </ejs-appbar>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'ej2-appbar-container',
    templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
    ngOnInit(): void {}
}

Other supported frameworks

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

• Blazor AppBar

• React AppBar

• Vue AppBar

• JavaScript AppBar