PanelBarComponent

Updated on Jan 8, 2026

Represents the Kendo UI PanelBar component for Angular. Displays hierarchical data as an expandable and collapsible accordion-style interface (see overview).

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-panelbar [items]="items" expandMode="single">
    </kendo-panelbar>
  `
})
class AppComponent {
  items = [
    { title: 'Item 1', expanded: true, content: 'Content 1' },
    { title: 'Item 2', content: 'Content 2' }
  ];
}

Selector

kendo-panelbar

Export Name

Accessible in templates as #kendoPanelBarInstance="kendoPanelbar"

Inputs

Name	Type	Default	Description
animate	boolean	true	Sets the animate state of the PanelBar (see example).
expandMode	PanelBarExpandMode	'multiple	Sets the expand mode of the PanelBar through the PanelBarExpandMode enum (see example).
height	any	'400px'	Sets the height of the component when the "full" expand mode is used. This option is ignored when the "multiple" or "single" expand modes are used.
items	PanelBarItemModel[]		Sets the items of the PanelBar as an array of PanelBarItemModel instances (see example).
keepItemContent	boolean | "loadOnDemand"	false	Controls how the PanelBar renders item content. The available options are: true—Renders all items' content and persists them in the DOM. false—Removes collapsed items' content from the DOM. "loadOnDemand"—Loads items' content only when expanded for the first time. Collapsed items' content is not rendered until the item is expanded. For more information, refer to the Rendering Modes article.
selectable	boolean	true	Allows the PanelBar to modify the selected state of the items.

Events

Name	Type	Description
collapse	EventEmitter<PanelBarCollapseEvent>	Fires when an item is about to be collapsed. This event is preventable. If you cancel it, the item will remain expanded (see example).
expand	EventEmitter<PanelBarExpandEvent>	Fires when an item is about to be expanded. This event is preventable. If you cancel it, the item will remain collapsed (see example).
itemClick	EventEmitter<PanelBarItemClickEvent>	Fires when an item is clicked (see example).
select	EventEmitter<PanelBarSelectEvent>	Fires when an item is about to be selected. This event is preventable. If you cancel it, the item will not be selected (see example).
stateChange	EventEmitter<PanelBarStateChangeEvent>	Fires when the state of the PanelBar changes. This event is triggered when an item is selected, expanded, or collapsed. (see example). The event data contains a collection of all items that are modified.