All Components

Keyboard Navigation

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

The PanelBar supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Highlights the previous item. If no previous item is available, highlights the last item.
Down Arrow Highlights the next item. If no next item is available, 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 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