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

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 { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";
import * as ReactDOM from "react-dom";

const App = () => {
  return (
    <div className='control-container'>
      <AppBarComponent colorMode="Primary">
        <ButtonComponent cssClass='e-inherit menu' iconCss='e-icons e-menu'></ButtonComponent>
        <span className="regular">React AppBar</span>
        <div className="e-appbar-spacer"></div>
        <ButtonComponent cssClass='e-inherit login'>FREE TRIAL</ButtonComponent>
      </AppBarComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

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