All Components

Keyboard Navigation

By default, the keyboard navigation of the PanelBar is enabled.

The following table lists the keyboard shortcuts the PanelBar supports when focused.

SHORTCUT DESCRIPTION
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';

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

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