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

JavaScript 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