All Components

Keyboard Navigation

The keyboard navigation of the ToolBar is always available.

The ToolBar supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Left Arrow & Right Arrow Moves the focus to the next available tool that can be focused.
Enter Clicks the currently active button or changes the state of the currently active toggleable button.
Tab Moves the focus to and from the ToolBar.
Alt+Down Arrow Opens the currently active SplitButton or DropDownButton.
Alt+Up Arrow Closes the currently active SplitButton or DropDownButton.
@Component({
    selector: 'my-app',
    template: `
        <kendo-toolbar>
            <kendo-toolbar-button [text]="'Button'"></kendo-toolbar-button>
            <kendo-toolbar-button [text]="'Toggle'" [toggleable]="true"></kendo-toolbar-button>
            <kendo-toolbar-splitbutton
                [text]="'Split Button'"
                [data]="splitButtonData">
            </kendo-toolbar-splitbutton>
            <kendo-toolbar-dropdownbutton
                [text]="'DropDownButton'"
                [data]="dropdownButtonData">
            </kendo-toolbar-dropdownbutton>
            <kendo-toolbar-buttongroup [selection]="'single'">
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-left'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-center'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-right'"></kendo-toolbar-button>
                <kendo-toolbar-button [toggleable]="true" [icon]="'align-justify'"></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
        </kendo-toolbar>
    `
})
class AppComponent {
    public splitButtonData: Array<any> = [{
        text: 'Option 1'
    }, {
        text: 'Option 2',
    }, {
        text: 'Option 3',
    }];

    public dropdownButtonData: Array<any> = [{
        text: 'Option 1'
    }, {
        text: 'Option 2',
    }, {
        text: 'Option 3',
    }];
}

Controlling the Focus

The ToolBar exposes a single focusable element—the ToolBar wrapper. All focus movements inside the ToolBar are managed according to the logic of the roving tabindex. When the user navigates through the tabs, the ToolBar focuses either the first tool or the tool that was last focused.

In this article