PanelBarProps

Updated on Sep 5, 2025

Represents the props of the KendoReact PanelBar component.

Name	Type	Default	Description
animation?	boolean	true	Sets the animation state of the PanelBar. jsx <PanelBar animation={false} />
children?	React.ReactNode		The child can be either a single PanelBarItem or a PanelBarItem array. jsx <PanelBar> <PanelBarItem title="Item 1" /> <PanelBarItem title="Item 2" /> </PanelBar>
className?	string		The class name that is set to the PanelBar. jsx <PanelBar className="custom-panelbar" />
dir?	string		Sets the direction of the PanelBar component. jsx <PanelBar dir="rtl" />
expanded?	string[]		Sets the initial expanded state of the PanelBar. Takes the id of the item. jsx <PanelBar expanded={['item1', 'item2']} />
expandMode?	PanelBarExpandMode	'multiple'	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. jsx <PanelBar expandMode="single" />
focused?	string		Sets the initial focused state of the PanelBar. Takes the id of the item. jsx <PanelBar focused="item1" />
isControlled?	boolean	false	Determines if the PanelBar is going to be used in controlled state. jsx <PanelBar isControlled />
keepItemsMounted?	boolean	false	Determines if the PanelBar items will be mounted after expand collapse. jsx <PanelBar keepItemsMounted />
onSelect?	(event: PanelBarSelectEventArguments) => void		Fires each time the user makes a selection (see 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. jsx <PanelBar selected="item1" />
style?	React.CSSProperties		Sets additional CSS styles to the PanelBar. jsx <PanelBar style={{ backgroundColor: 'lightblue' }} />