Components / Buttons / DropDownButton

Keyboard Navigation

The keyboard navigation of the DropDownButton is always available.

The DropDownButton supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Enter & Space Opens the popup, or activates the highlighted item and closes the popup.
Alt+Down Arrow Opens the popup.
Alt+Up Arrow Closes the popup.
Esc Closes the popup.
Up Arrow & Left Arrow Sets the focus on the previously available item.
Down Arrow & Right Arrow Sets the focus on the next available item. 
@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <kendo-dropdownbutton [data]="data">
                  User Settings
            </kendo-dropdownbutton>
        </div>
    `
})
class AppComponent {
    data: Array<any> = [{
        text: 'My Profile'
    }, {
        text: 'Friend Requests'
    }, {
        text: 'Account Settings'
    }, {
        text: 'Support'
    }, {
        text: 'Log Out'
    }];
}

In this article