Titles

You can configure the PanelBar items by adding images and rendering icons next to them.

Getting Started

You can handle the title of each PanelBar item by setting the title property.

class App extends React.Component {
    render() {
        return(
            <div class="panelbar-wrapper">
                <PanelBar>
                    <PanelBarItem title="First Title" />
                    <PanelBarItem title="Second Title"/>
                </PanelBar>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Adding Images

You can load images next to the titles of the PanelBar items by setting the imageUrl property.

<style>
    .panelbar-wrapper {
        max-width: 300px;
        margin: 0 auto;
    }
</style>
class App extends React.Component {
    baseSportsIconUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/";
    baseIconUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/16/";

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

    iconUrl(imageName) {
        return this.baseIconUrl + imageName + ".png";
    }
    render() {
        return(
            <div class="panelbar-wrapper">
                <PanelBar>
                    <PanelBarItem title="Golf" imageUrl={this.sportsIconUrl('golf')}>
                        <PanelBarItem title="Top News" imageUrl={this.iconUrl('star')}/>
                        <PanelBarItem title="Photo Galleries" imageUrl={this.iconUrl('photo')}/>
                        <PanelBarItem title="Video Records" imageUrl={this.iconUrl('video')}/>
                        <PanelBarItem title="Radio Records" imageUrl={this.iconUrl('speaker')}/>
                    </PanelBarItem>
                    <PanelBarItem title="Baseball" imageUrl={this.sportsIconUrl('baseball')}>
                        <PanelBarItem title="Top News" imageUrl={this.iconUrl('star')}/>
                        <PanelBarItem title="Photo Galleries" imageUrl={this.iconUrl('photo')}/>
                        <PanelBarItem title="Video Records" imageUrl={this.iconUrl('video')}/>
                        <PanelBarItem title="Radio Records" imageUrl={this.iconUrl('speaker')}/>
                    </PanelBarItem>
                    <PanelBarItem title="Swimming" imageUrl={this.sportsIconUrl('swimming')}>
                        <PanelBarItem title="Top News" imageUrl={this.iconUrl('star')}/>
                        <PanelBarItem title="Photo Galleries" imageUrl={this.iconUrl('photo')}/>
                    </PanelBarItem>
                    <PanelBarItem title="Snowboarding" imageUrl={this.sportsIconUrl('snowboarding')}>
                        <PanelBarItem title="Photo Galleries" imageUrl={this.iconUrl('photo')}/>
                        <PanelBarItem title="Video Records" imageUrl={this.iconUrl('video')}/>
                    </PanelBarItem>
                </PanelBar>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Adding Icons

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

  • Setting the icon property (for build-in icons), or
  • Setting the iconClass property (for custom icons).
<style>
    .panelbar-wrapper {
        max-width: 300px;
        margin: 0 auto;
    }
</style>
class App extends React.Component {
    baseSportsIconUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/";
    baseIconUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons/16/";

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

    iconUrl(imageName) {
        return this.baseIconUrl + imageName + ".png";
    }
    render() {
        return(
            <div class="panelbar-wrapper">
                 <PanelBar>
                    <PanelBarItem title="My Web Site'" icon="folder" expanded={true}>
                        <PanelBarItem title="images'" icon="folder" expanded={true}>
                            <PanelBarItem title="logo.png'" icon="image"/>
                            <PanelBarItem title="body-back.png'" icon="image"/>
                            <PanelBarItem title="my-photo.png'" icon="image"/>
                        </PanelBarItem>
                        <PanelBarItem title="resources'" icon="folder" expanded={true}>
                            <PanelBarItem title="pdf'" icon="folder" expanded={true}>
                                <PanelBarItem title="prices.pdf'" icon="pdf"/>
                                <PanelBarItem title="brochure.pdf'" icon="pdf"/>
                            </PanelBarItem>
                            <PanelBarItem title="zip'" icon="folder"/>
                        </PanelBarItem>
                        <PanelBarItem title="about.html'" icon="file"/>
                        <PanelBarItem title="contacts.html'" icon="file"/>
                        <PanelBarItem title="index.html'" icon="file"/>
                        <PanelBarItem title="portfolio.html'" icon="file"/>
                    </PanelBarItem>
                </PanelBar>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /