All Components

Components / Buttons / ToolBar

Keyboard Navigation

The keyboard navigation of the ToolBar is always available.

The Toolbar supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
TAB or Right Arrow Focuses the next focusable item.
Shift+TAB or Left Focuses the previous focusable item.
Enter or Space Presses the focused button.
Home Focuses the first focusable item.
End Focuses last focusable item.

The ToolBar supports the following keyboard shortcuts which are applied to the SplitButtons or CommandOverflow menus:

SHORTCUT DESCRIPTION
Alt+Down Arrow Opens the SplitButton or CommandOverflow menu.
Down Focuses the next item in the SplitButton or CommandOverflow menu.
Up Focuses the previous item in the SplitButton or CommandOverflow menu.
Alt+Up Closes the SplitButton or CommandOverflow menu.
Esc Closes the SplitButton or CommandOverflow menu.
Enter or Space Presses the focused button. 
<div id="vueapp" class="vue-app">
    <kendo-toolbar>
        <kendo-toolbar-item type="button" text="Button"></kendo-toolbar-item>
        <kendo-toolbar-item type="button" text="Toggle Button" :togglable="true"></kendo-toolbar-item>
        <kendo-toolbar-item type="splitButton" text="Insert" :menu-buttons="[
            { text: 'Insert above', icon: 'insert-up' },
            { text: 'Insert between', icon: 'insert-middle' },
            { text: 'Insert below', icon: 'insert-down' }]">
        </kendo-toolbar-item>
        <kendo-toolbar-item type="separator"></kendo-toolbar-item>
        <kendo-toolbar-item type="buttonGroup" :buttons="[
            { icon: 'align-left', text: 'Left', togglable: true, group: 'text-align' },
            { icon: 'align-center', text: 'Center', togglable: true, group: 'text-align' },
            { icon: 'align-right', text: 'Right', togglable: true, group: 'text-align' }]">
        </kendo-toolbar-item>
        <kendo-toolbar-item type="button" text="Action" overflow="always"></kendo-toolbar-item>
        <kendo-toolbar-item type="button" text="Another Action" overflow="always"></kendo-toolbar-item>
        <kendo-toolbar-item type="button" text="Something else here" overflow="always"></kendo-toolbar-item>
    </kendo-toolbar>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"  
})
In this article