Components / Layout / PanelBar

Items

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

The PanelBar provides configuration options for:

Titles

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

@Component({
    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar>
            <kendo-panelbar-item [title]="'First Title'"></kendo-panelbar-item>
            <kendo-panelbar-item [title]="'Second Title'"></kendo-panelbar-item>
        </kendo-panelbar>
    </div>
    `
})

class AppComponent {}

Title Images

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

@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).
@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.

@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.

@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.

@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 {}

In this article