All Components

Keyboard Navigation

The keyboard navigation of the Menu is always available.

To focus the Menu, either:

  • Click in the example area and press the Tab key, or
  • Use Alt+w for the vertical and Alt+q for the horizontal Menu.

The Menu supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Alt+w Focuses the vertical Menu.
Alt+q Focuses the horizontal Menu.
Home Goes to the first item.
End Goes to the last item.
Right Arrow Goes to the next item or opens an item group.
Left Arrow Goes to the previous item or closes an item group.
Down Arrow Opens an item group or goes to the next item in a group.
Up Arrow Goes to the previous item in a group.
Enter Selects or navigates to an item (same as click).
Space Selects or navigates to an item (same as click).
Esc Closes the innermost open group.
Tab Tabs away from the Menu to the next focusable page element.
Shift+Tab Tabs away from the Menu to the previously focusable page element.
<div id="vueapp" class="vue-app" style="height:500px">
    <h4>Vertical menu</h4>
    <div style="width:120px;">
        <kendo-menu ref="menu1" :orientation="'vertical'">
            <li>
                First Item
                <ul>
                    <li>Sub Item 1</li>
                    <li>Sub Item 2
                        <ul>
                            <li>Sub sub item 1</li>
                            <li>Sub sub item 2</li>
                            <li>Sub sub item 3</li>
                            <li>Sub sub item 4</li>
                        </ul>
                    </li>
                    <li>Sub Item 3</li>
                    <li>Sub Item 4</li>
                </ul>
            </li>
            <li>
                Second Item
                <ul>
                    <li>Sub Item 1</li>
                    <li>Sub Item 2</li>
                    <li>Sub Item 3</li>
                    <li>Sub Item 4</li>
                </ul>
            </li>
            <li disabled="disabled">Disabled Item</li>
        </kendo-menu>
    </div>

    <h4 style="padding-top: 2em;">Horizontal menu</h4>
    <kendo-menu ref="menu2" :orientation="'horizontal'">
        <li>
            First Item
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2
                    <ul>
                        <li>Sub sub item 1</li>
                        <li>Sub sub item 2</li>
                        <li>Sub sub item 3</li>
                        <li>Sub sub item 4</li>
                    </ul>
                </li>
                <li>Sub Item 3</li>
                <li>Sub Item 4</li>
            </ul>
        </li>
        <li>
            Second Item
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
                <li>Sub Item 4</li>
            </ul>
        </li>
        <li disabled="disabled">Disabled Item</li>
    </kendo-menu>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: '#vueapp',
    created() {
        var vm = this;
        window.addEventListener('keydown', (e) => {
            if (e.altKey && e.keyCode == 87) {
                $(vm.$refs.menu1.$el).focus();
            }
            else if (e.altKey && e.keyCode == 81) {
                $(vm.$refs.menu2.$el).focus();
            }
        });
    }
})
In this article