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 Highlights the previous item. If there is no previous item, highlights the last item.
Down Arrow Highlights the next item. If there is no next item, highlights the first item.
Left Arrow Collapses the current item if it is expanded. If the item is not expandable, highlights the parent item.
Right Arrow Expands the current item if it is collapsed. If child items are available, highlights the first item.
Home Selects the first item from the list.
End Selects the last item from the list.
Enter & Space keys Selects the highlighted item, or toggles the group of items.
Tab Focuses the PanelBar component.
import { PanelBarItemModel, LayoutModule } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
        <kendo-panelbar [items]="items"></kendo-panelbar>
    `
})

class AppComponent {
    private items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {id: "0", title: "Projects", children: [
                <PanelBarItemModel> {id: "1", title: "New Business Plan" },
                <PanelBarItemModel> {id: "2", title: "Sales Forecasts", children: [
                        <PanelBarItemModel> {id: "3", title: "Q1 Forecast" },
                        <PanelBarItemModel> {id: "4", title: "Q2 Forecast" },
                        <PanelBarItemModel> {id: "5", title: "Q3 Forecast" },
                        <PanelBarItemModel> {id: "6", title: "Q4 Forecast" }
                    ]
                }
            ]
        },
        <PanelBarItemModel> {id: "7", title: "Programs", children: [
                <PanelBarItemModel> {id: "8", title: "Monday" },
                <PanelBarItemModel> {id: "9", title: "Tuesday" },
                <PanelBarItemModel> {id: "10", title: "Wednesday" },
                <PanelBarItemModel> {id: "11", title: "Thursday" },
                <PanelBarItemModel> {id: "12", title: "Friday" }
            ]
        },
        <PanelBarItemModel> {id: "13", title: "Communication", disabled: true}
    ];
}
In this article