All Components

Keyboard Navigation

By default, the keyboard navigation of the Kendo UI PanelBar for Angular 2 is enabled.

Below is the list with the keyboard shortcuts the PanelBar supports when focused.

Upper Arrow Highlight the previous item. If there is no previous item, highlight the last item.
Down Arrow Highlight the next item. If there is no next item, highlight the first item.
Left Arrow Collapse current item if it is expanded. If the item is not expandable, highlight the parent item.
Right Arrow Expand the current item if it is collapsed. If child items are available, highlight the first item.
Home Select the first item from the list.
End Select the last item from the list.
Enter & Space keys Select the highlighted item or toggle the group of items.
Tab Focus the PanelBar component.
import { PanelBarItemModel, LayoutModule } from '@progress/kendo-angular-layout';

    selector: 'my-app',
    template: `
    <div class="panelbar-wrapper">
        <kendo-panelbar [items]="items">
            <template PanelBarItemTemplate let-dataItem>
                <div>Custom template: </div>{{dataItem.content}}

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {title: "Projects", children: [
                <PanelBarItemModel> {title: "New Business Plan" },
                <PanelBarItemModel> {title: "Sales Forecasts", children: [
                        <PanelBarItemModel> {title: "Q1 Forecast" },
                        <PanelBarItemModel> {title: "Q2 Forecast" },
                        <PanelBarItemModel> {title: "Q3 Forecast" },
                        <PanelBarItemModel> {title: "Q4 Forecast" }
        <PanelBarItemModel> {title: "Programs", children: [
                <PanelBarItemModel> {title: "Monday" },
                <PanelBarItemModel> {title: "Tuesday" },
                <PanelBarItemModel> {title: "Wednesday" },
                <PanelBarItemModel> {title: "Thursday" },
                <PanelBarItemModel> {title: "Friday" }
        <PanelBarItemModel> {title: "Communication", disabled: true}
In this article