Kendo UI for jQuery PanelBar Overview

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

Depending on the requirements, you can define its structure by using HTML or y dynamically configuring it through the PanelBar API. The content of the PanelBar items can also be loaded through AJAX by specifying a content URL.

Kendo UI for jQuery Kendoka image

The PanelBar is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the PanelBar

You can create a PanelBar by using HTML markup, a JSON data object, or a dynamic data binding to a local or a remote data source.

As the PanelBar has to be initialized after the DOM is fully loaded, create the widget within a $(document).ready() statement.


You can create a Kendo UI PanelBar by targeting the root element of an HTML list. The widget utilizes this list to define its structure and content.

<ul id="panelbar">
        Item 1
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
    <li>Item 2</li>

    $(document).ready(function() {


The following example demonstrates how to initialize a PanelBar by using a JSON data object.

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

    dataSource: [
        text: "Item 1",
        cssClass: "myClass",                            // (Optional) Add a custom CSS class to the item.
                                                        // Added with 2012 Q3 SP1.
        url: ""                  // (Optional) Link a URL if navigation is needed.
        text: "<b>Item 2</b>",
        encoded: false,                                 // Allow the usage of HTML for item text
        content: "text"                                 // content within an item.
        text: "Item 3",
        contentUrl: "partialContent.html"               // A content URL to load within an item.
        text: "Item 4",
        imageUrl: "",    // (Optional) An item image URL.
        expanded: true,                                 // The item is rendered as expanded.
        items: [{                                       // A subitem collection.
          text: "Sub Item 1"
        }, {
          text: "Sub Item 2"
        text: "Item 5",
        // (Optional) An item image sprite CSS class.
        spriteCssClass: "imageClass3"

Functionality and Features

See Also

In this article