All Components

Orientation

You can specify the orientation of the Menu by setting the orientation option.

The configuration option accepts any of the following values:

  • horizontal
  • vertical
<div id="vueapp" class="vue-app" style="height:450px;">
    <h4>Orientation Settings</h4>
    <ul class="options">
        <li>
            <input id="horizontal" name="orientation" type="radio" checked="checked" /> <label for="horizontal">Horizontal</label>
        </li>
        <li>
            <input id="vertical" name="orientation" type="radio" /> <label for="vertical">Vertical</label>
        </li>
    </ul>
    <br />
    <span class="k-button" ref="apply" href="#" style="width: 80px;" v-on:click="onClick">Apply</span>
    <kendo-menu ref="menu1" id="menu1">
        <li>
        Item 1
            <ul>
                <li>Sub Item 1
                    <ul>
                        <li>Sub Item 1.1</li>
                        <li>Sub Item 1.2</li>
                        <li>Sub Item 1.3</li>
                    </ul>
                </li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
            </ul>
        </li>
        <li>
            Item 2
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2
                    <ul>
                        <li>Sub Item 1.1</li>
                        <li>Sub Item 1.2</li>
                        <li>Sub Item 1.3</li>
                    </ul>
                </li>
                <li>Sub Item 3</li>
            </ul>
        </li>
        <li>
        Item 3
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2
                <ul>
                    <li>Sub Item 1.1</li>
                    <li>Sub Item 1.2</li>
                    <li>Sub Item 1.3</li>
                </ul>
            </li>
            <li>Sub Item 3</li>
        </ul>
        </li>
    </kendo-menu>
</div>
<style>
    .options li {
        list-style: none;
    }
</style>
Vue.use(LayoutInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        onClick: function (e) {
            var vm = this;
            var menu = vm.$refs.menu1.kendoWidget();
            var orientation = vm.getOrientation();

            $("#menu1").kendoMenu({
                orientation: orientation
            }).data("kendoMenu").wrapper.css("width", (orientation == "horizontal") ? "100%" : 100);
        },
        getOrientation: function () {
            var checked = $("input[type=radio]:checked")[0].id;
            return checked;
        }
    }
})
In this article