Edit this page


Appends an item(s) to the PanelBar.


<ul id="panelbar"></ul>

    var panelBar = $("#panelbar").data("kendoPanelBar");
                text: "Item 1",
                cssClass: "myClass",                            // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
                url: "http://www.telerik.com/"                  // link URL if navigation is needed, optional.
                text: "<b>Item 2</b>",
                encoded: false,                                 // Allows use of HTML for item text
                content: "text"                                 // content within an item
                text: "Item 3",
                contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
                text: "Item 4",
                imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
                expanded: true,                                 // item is rendered expanded
                items: [{                                       // Sub item collection.
                    text: "Sub Item 1"
                    text: "Sub Item 2"
                text: "Item 5",
                // item image sprite CSS class, optional
                spriteCssClass: "imageClass3"


item String |Element |jQuery |Array

Target item, specified as the JSON representation of an object. You can pass item text, content or contentUrl here. Can handle an HTML string or array of such strings or JSON.

referenceItem String |Element |jQuery

A reference item to append the new item in the PanelBar, can be omitted.


kendo.ui.PanelBar Returns the PanelBar object to support chaining.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article