New to KendoReact? Start a free 30-day trial

AppBarProps

Interface

Represents the props of 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

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" />