# 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](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/items#titles)
* [Rendering images next to the item titles](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/items#title-images)
* [Rendering icons next to the item titles](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/items#title-icons)
* [Setting the selected state of the items](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/items#selected-state)
* [Enabling and disabling the items](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/items#disabled-state)
* [Expanding and collapsing the items](https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/items#expanded-state)

## Titles

Use one of the following approaches to provide the PanelBar item title:

* Set the PanelBarItem [title](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent#title) option.
* Use the [kendoPanelBarItemTitle](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemtemplatedirective) template directive to render any custom content.

> The `kendoPanelBarItemTitle` directive overrides the PanelBarItem `title` option.

The following example demonstrates both approaches for setting the PanelBar item title.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/panelbar/items/titles/source.txt)

## Title Images

You can load images next to the titles of the PanelBar items by using the [imageUrl](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent#imageurl) option.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/panelbar/items/title-images/source.txt)

## Title Icons

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

* Setting the [SVGicon](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent#svgicon) option (for build-in icons), or
* Setting the [iconClass](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent#iconclass) option (for custom icons).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/panelbar/items/title-icons/source.txt)

## Selected State

You can set the selected state to a PanelBar item by using the [selected](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent#selected) property.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/panelbar/items/selected-state/source.txt)

## Disabled State

You can disable PanelBar items by setting the [disabled](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent#disabled) property to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/panelbar/items/disabled-state/source.txt)

## Expanded State

By default, all PanelBar items are collapsed. To expand them, set the [expanded](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent#expanded) property to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/panelbar/items/expanded-state/source.txt)

## Suggested Links

* [API Reference of the PanelBarItem](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbaritemcomponent)
* [API Reference of the PanelBar](https://www.telerik.com/kendo-angular-ui-develop/components/layout/api/panelbarcomponent)