Items

You can instantiate the PanelBar items by initializing them as PanelBarItem components and use their corresponding properties.

The PanelBar provides configuration options for:

• Setting the titles of its items
• Rendering images next to the item titles
• Rendering icons next to the item titles
• Setting the selected state of the items
• Enabling and disabling the items
• Expanding and collapsing the items

Titles

You can handle the title of each PanelBar item by using the title attribute of the item.

Title Images

You can load images next to the titles of the PanelBar items by using the imageUrl option.

Copy Code@Component({
    selector: 'my-app',
    styles: [`
        .panelbar-wrapper {
            max-width: 300px;
            margin: 0 auto;
        }
    `],
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item [title]="'Golf'" [imageUrl]="sportsIconUrl('golf')">
                <kendo-panelbar-item [title]="'Top News'" [imageUrl]="iconUrl('star')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Photo Galleries'" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Video Records'" [imageUrl]="iconUrl('video')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Radio Records'" [imageUrl]="iconUrl('speaker')"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Baseball'" [imageUrl]="sportsIconUrl('baseball')">
                <kendo-panelbar-item [title]="'Top News'" [imageUrl]="iconUrl('star')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Photo Galleries'" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Video Records'" [imageUrl]="iconUrl('video')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Radio Records'" [imageUrl]="iconUrl('speaker')"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Swimming'" [imageUrl]="sportsIconUrl('swimming')">
                <kendo-panelbar-item [title]="'Top News'" [imageUrl]="iconUrl('star')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Photo Galleries'" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Snowboarding'" [imageUrl]="sportsIconUrl('snowboarding')">
                <kendo-panelbar-item [title]="'Photo Galleries'" [imageUrl]="iconUrl('photo')"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Video Records'" [imageUrl]="iconUrl('video')"></kendo-panelbar-item>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {
    private baseSportsIconUrl: string = "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/";
    private baseIconUrl: string = "https://demos.telerik.com/kendo-ui/content/shared/icons/16/";

    private sportsIconUrl(imageName: string): string {
        return this.baseSportsIconUrl + imageName + ".png";
    }

    private iconUrl(imageName: string): string {
        return this.baseIconUrl + imageName + ".png";
    }
}

Title Icons

You can render icons next to the titles of the PanelBar items by either:

• Setting the icon option (for build-in icons), or
• Setting the iconClass option (for custom icons).

Copy Code@Component({
    selector: 'my-app',
    styles: [`
        .panelbar-wrapper {
            max-width: 300px;
            margin: 0 auto;
        }
    `],
    template: `
    <div class="panelbar-wrapper">
         <kendo-panelbar>
            <kendo-panelbar-item [title]="'My Web Site'" icon="folder" [expanded]="true">
                <kendo-panelbar-item [title]="'images'" icon="folder" [expanded]="true">
                    <kendo-panelbar-item [title]="'logo.png'" icon="image"></kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'body-back.png'" icon="image"></kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'my-photo.png'" icon="image"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item [title]="'resources'" icon="folder" [expanded]="true">
                    <kendo-panelbar-item [title]="'pdf'" icon="folder" [expanded]="true">
                        <kendo-panelbar-item [title]="'prices.pdf'" icon="pdf"></kendo-panelbar-item>
                        <kendo-panelbar-item [title]="'brochure.pdf'" icon="pdf"></kendo-panelbar-item>
                    </kendo-panelbar-item>
                    <kendo-panelbar-item [title]="'zip'" icon="folder"></kendo-panelbar-item>
                </kendo-panelbar-item>
                <kendo-panelbar-item [title]="'about.html'" icon="file"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'contacts.html'" icon="file"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'index.html'" icon="file"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'portfolio.html'" icon="file"></kendo-panelbar-item>
            </kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent { }

Selected State

You can set the selected state to a PanelBar item by using the selected property.

Copy Code@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item [title]="'Team'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Projects'" [selected]="true"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Programs'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Communication'"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Disabled State

You can disable PanelBar items by setting the disabled property to true.

Copy Code@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item [title]="'Team'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Projects'" [disabled]="true"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Programs'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Communication'"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Expanded State

By default, all PanelBar items are collapsed. To expand them, set the expanded property to true.

Copy Code@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item [title]="'Team'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Projects'" [expanded]="true">
                <kendo-panelbar-item [title]="'Business Plan'"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'Forecast'"></kendo-panelbar-item>
                <kendo-panelbar-item [title]="'OKRs'"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Programs'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Communication'"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Suggested Links

• API Reference of the PanelBarItem
• API Reference of the PanelBar