New to KendoReact? Start a free 30-day trial

PanelBarProps

Interface

Represents the props of the KendoReact PanelBar component.

Definition

Package:@progress/kendo-react-layout

Properties

animation?

boolean

Sets the animation state of the PanelBar.

Default:

true

Example:

jsx

<PanelBar animation={false} />

children?

ReactNode

The child can be either a single PanelBarItem or a PanelBarItem array.

Example:

jsx

<PanelBar>
  <PanelBarItem title="Item 1" />
  <PanelBarItem title="Item 2" />
</PanelBar>

className?

string

The class name that is set to the PanelBar.

Example:

jsx

<PanelBar className="custom-panelbar" />

dir?

string

Sets the direction of the PanelBar component.

Example:

jsx

<PanelBar dir="rtl" />

expanded?

string[]

Sets the initial expanded state of the PanelBar. Takes the id of the item.

Example:

jsx

<PanelBar expanded={['item1', 'item2']} />

expandMode?

PanelBarExpandMode

Sets the expand mode of the PanelBar (see example).

The available modes are:

"single"—Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
"multiple"—Allows you to expand two or more items at a time. Items can also be toggled.

Default:

'multiple'

Example:

jsx

<PanelBar expandMode="single" />

focused?

string

Sets the initial focused state of the PanelBar. Takes the id of the item.

Example:

jsx

<PanelBar focused="item1" />

isControlled?

boolean

Determines if the PanelBar is going to be used in controlled state.

Default:

false

Example:

jsx

<PanelBar isControlled />

keepItemsMounted?

boolean

Determines if the PanelBar items will be mounted after expand collapse.

Default:

false

Example:

jsx

<PanelBar keepItemsMounted />

onSelect?

(event: PanelBarSelectEventArguments) => void

Fires each time the user makes a selection (see example).

Parameters:eventPanelBarSelectEventArguments

Example:

jsx

<PanelBar onSelect={(event) => console.log(event.item)} />

selected?

string

If set, overrides the currently selected property in the PanelBar state. Takes the id of the item.

Example:

jsx

<PanelBar selected="item1" />

style?

CSSProperties

Sets additional CSS styles to the PanelBar.

Example:

jsx

<PanelBar style={{ backgroundColor: 'lightblue' }} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration so AI agents can interact with this PanelBar. Set to true to use the provider-level dataName, or pass a config object to override.

Requires a WebMcpProvider ancestor from @progress/kendo-react-webmcp.