React AppBar - Lightweight and Fully Customizable Component

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.

• React AppBar Size demo.
• React AppBar Size documentation.

Color

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

• React AppBar Color demo.
• React AppBar Color documentation.

Position

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

• React AppBar Position documentation.

Sticky

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

• React AppBar Sticky documentation.

Content alignment

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

• React AppBar Content Alignment documentation.

Responsive design

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

• React AppBar Responsive Design documentation.

AppBar code example

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

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

  render() {
    return (
      <div className='control-pane'>
        <div className='control-section'>
            <AppBarComponent colorMode="Primary">
                <ButtonComponent cssClass='e-inherit' iconCss='e-icons e-menu'></ButtonComponent>
                <span className="regular" style=>React AppBar</span>
                <div className="e-appbar-spacer"></div>
                <ButtonComponent cssClass='e-inherit'>FREE TRIAL</ButtonComponent>
            </AppBarComponent>
        </div>
      </div>
    )
  }
}

Other supported frameworks

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

• Blazor AppBar

• Angular AppBar

• Vue AppBar

• JavaScript AppBar