All Components

Keyboard Navigation

The keyboard navigation of the PanelBar is always available.

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 { Component } from '@angular/core';
import { PanelBarItemModel } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
        <kendo-panelbar [items]="items"></kendo-panelbar>
    `
})
export 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 }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';

import 'hammerjs';

@NgModule({
    imports:      [BrowserModule, BrowserAnimationsModule, LayoutModule],
    declarations: [AppComponent],
    bootstrap:    [AppComponent]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article