New to KendoReact? Start a free 30-day trial

AppBar

Component

Represents the KendoReact AppBar component. Used to display information, actions, branding titles and additional navigation on the current screen.

A Functional Component.

Definition

Package:@progress/kendo-react-layout

Syntax:

jsx


const App = () => {
  return (
      <AppBar>
          <AppBarSection>
              <span className="k-icon k-i-menu" />
          </AppBarSection>

          <AppBarSpacer style={{ width: 8 }} />

          <AppBarSection>
              <h1 className="title">{tc.text} AppBar</h1>
          </AppBarSection>

          <AppBarSpacer />

          <AppBarSection>
              <BadgeContainer>
                  <span className="k-icon k-i-bell" />
                  <Badge themeColor="info" shape="dot" />
              </BadgeContainer>
          </AppBarSection>
     </AppBar>
  );
};

Properties

props

AppBarProps intersected with RefAttributes<null | AppBarHandle>

The props of the AppBar component.