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.

Definition

Package:@progress/kendo-react-layout

Properties Interface:AppBarProps

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

children?

any

Represents the child elements that are passed to the AppBar.

Example:

jsx

<AppBar>
  <div>Custom Content</div>
</AppBar>

className?

string

Sets additional CSS classes to the AppBar.

Example:

jsx

<AppBar className="custom-class" />

id?

string

Sets the id property of the root AppBar element.

Example:

jsx

<AppBar id="appbar1" />

position?

AppBarPosition

Specifies the AppBar position (see example).

The possible values are:
'top' (Default)
'bottom'

Default:

top

Example:

jsx

<AppBar position="bottom" />

positionMode?

AppBarPositionMode

Specifies the AppBar position mode (see example).

The possible values are:
'static' (Default)
'sticky'
'fixed'

Default:

static

Example:

jsx

<AppBar positionMode="sticky" />

style?

CSSProperties

Sets additional CSS styles to the AppBar.

Example:

jsx

<AppBar style={{ backgroundColor: 'blue' }} />

themeColor?

AppBarThemeColor

Specifies the AppBar theme color (see example).

The possible values are:
'base'
'primary'
'secondary'
'tertiary'
'inverse'

Default:

undefined (theme-controlled)

Example:

jsx

<AppBar themeColor="primary" />

References

ref

AppBarHandle

The AppBar ref.