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

Suggested Links

• API Reference of the DropDownButton
• Accessibility