All Components

Keyboard Navigation

The keyboard navigation of the Splitter is always available.

To focus the Splitter, click in the example area and press the Tab key.

The Splitter supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Moves the focused split-bar up (in a vertical Splitter).
Down Arrow Moves the focused split-bar down (in a vertical Splitter).
Left Arrow Moves the focused split-bar to the left (in a horizontal Splitter).
Right Arrow Moves the focused split-bar to the right (in a horizontal Splitter).
Ctrl+Up Arrow Collapses the lower pane or expands the upper one.
Ctrl+Down Arrow Collapses the upper pane or expands the lower one.
Ctrl+Left Arrow Collapses the left pane or expands the right one.
Ctrl+Right Arrow Collapses the right pane or expands the left one.
Enter Accepts the current position of the split-bar.
Esc Returns the split-bar to its initial position.
<div id="vueapp" class="vue-app">
     <kendo-splitter :orientation="'vertical'">
        <div id="top-pane">
            <kendo-splitter ref="horizontal" :orientation="'horizontal'">
                <div id="left-pane">
                    <div class="pane-content">
                        <h3>Inner splitter / left pane</h3>
                        <p>Resizable and collapsible.</p>
                    </div>
                </div>
                <div id="center-pane">
                    <div class="pane-content">
                        <h3>Inner splitter / center pane</h3>
                        <p>Resizable only.</p>
                    </div>
                </div>
                <div id="right-pane">
                    <div class="pane-content">
                        <h3>Inner splitter / right pane</h3>
                        <p>Resizable and collapsible.</p>
                    </div>
                </div>
            </kendo-splitter>
        </div>
        <div id="bottom-pane">
            <div class="pane-content">
                <h3>Outer splitter / bottom pane</h3>
                <p>Non-resizable and non-collapsible.</p>
            </div>
        </div>
    </kendo-splitter>
</div>
Vue.use(LayoutInstaller);

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