Getting Started with Kendo UI for Angular PanelBar

The PanelBar displays hierarchical data as a multi-level, expandable component.

You can describe the children items:

  • By using nested PanelBarItem components, or
  • By using the items property.
The PanelBar Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates the PanelBar in action.

View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features


The following example demonstrates basic PanelBar events.

    selector: 'my-app',
    styles: [`
        .custom-template {
            padding: 30px;
            text-align: center;
    template: `
        <kendo-panelbar [items]="items" (stateChange)="onPanelChange($event)">
            <ng-template kendoPanelBarItemTemplate let-dataItem>
                <div class="custom-template">
                    <h4>Custom template: </h4>

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {title: "First item", content: "Item content", expanded: true },
        <PanelBarItemModel> {title: "Second item", children: [
                <PanelBarItemModel> {title: "Child item" }

    public onPanelChange(event: any) { console.log("stateChange: ", event); }