Components / Layout / Drawer

Keyboard Navigation

The keyboard navigation of the Drawer is always available.

The Drawer supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Enter & Space Selects the highlighted item, and toggles its expanded state
Tab Focuses the first item and moves the focus sequentially through the list of items.
Shift + Tab Moves the focus sequentially through the list of items in reversed order. 
import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerItem } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [expanded]="true"
            [items]="items"
            [mini]="true"
            [mode]="'push'">
        </kendo-drawer>

        <kendo-drawer-content>
            <button class="k-button" (click)="drawer.toggle()">Toggle the Drawer</button>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        my-app { padding: 0; }

        kendo-drawer-content { padding: 20px; }

        kendo-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    `]
})
export class AppComponent {
    public items: DrawerItem[] = [
        { text: 'Inbox', icon: 'k-i-inbox' },
        { text: 'Notifications', icon: 'k-i-bell' },
        { text: 'Favourites', icon: 'k-i-star-outline' },
        { text: 'Date', icon: 'k-i-calendar' }
    ];
}

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule
    ],
    declarations: [
        AppComponent,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';


const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article