AppBar

Updated on Aug 21, 2025

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

A Functional Component.

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>
  );
};

Name	Type	Default	Description
props	AppBarProps intersected with RefAttributes<"null" | AppBarHandle>		The props of the AppBar component.