All Components

Keyboard Navigation

The keyboard navigation of the PanelBar is always available.

To focus the PanelBar, either:

  • Click in the example area and press the Tab key, or
  • Use Alt+w.

The PanelBar supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Highlights the previous item.
Left Arrow Highlights the previous item.
Down Arrow Highlights the next item.
Right Arrow Highlights the next item.
Home Selects the first item in the list.
End Selects the last item in the list.
Enter
  • Selects the highlighted item.
  • Toggles the item group.
Space
  • Selects the highlighted item.
  • Toggles the item group.
<div id="vueapp" class="vue-app">
    <kendo-panelbar ref="panelbar1">
        <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-panelbar>
</div>
Vue.use(LayoutInstaller);

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