HTML5/JavaScript 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.

• JavaScript AppBar Size demo.
• JavaScript AppBar Size documentation.

Color

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

• JavaScript AppBar Color demo.
• JavaScript AppBar Color documentation.

Position

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

• JavaScript AppBar Position documentation.

Sticky

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

• JavaScript AppBar Sticky documentation.

Content alignment

The JavaScript AppBar component aligns the content using a spacer and separator.

• JavaScript AppBar Content Alignment documentation.

Responsive design

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

• JavaScript AppBar Responsive Design documentation.

AppBar code example

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

<div class="control-section">
    <div class="content-wrapper">
        <header id="appbar">
            <button id="defaultButtonMenu"></button>
            <span class="regular" style="margin:0 5px">EJ2 AppBar</span>
            <div class="e-appbar-spacer"></div>
            <button id="defaultButtonLogin"></button>
        </header>
    </div>
</div>

import { loadCultureFiles } from '../common/culture-loader';
import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";

/**
 * Default AppBar sample
*/

    loadCultureFiles();
    const appbarObj: AppBar = new AppBar({
        colorMode: 'Primary'
    });
    appbarObj.appendTo("#appbar");

    const defaultButtonMenuObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
    defaultButtonMenuObj.appendTo('#defaultButtonMenu');

    const defaultButtonLoginObj: Button = new Button({ cssClass: 'e-inherit', content: 'FREE TRIAL' });
    defaultButtonLoginObj.appendTo('#defaultButtonLogin');

Other supported frameworks

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

• Blazor AppBar

• React AppBar

• Angular AppBar

• Vue AppBar