New to Kendo UI for Angular? Start a free 30-day trial

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

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

The kendoPanelBarItemTitle directive overrides the PanelBarItem title option.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Title Images

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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).
Example
View Source
Edit In Stackblitz  
Change Theme:

Selected State

You can set the selected state to a PanelBar item by using the selected property.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabled State

You can disable PanelBar items by setting the disabled property to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Expanded State

By default, all PanelBar items are collapsed. To expand them, set the expanded property to true.

Example
View Source
Edit In Stackblitz  
Change Theme: