All Components

Components / Layout / PanelBar

RTL Support

You can activate the right-to-left functionality by adding the k-rtl class to the container of the PanelBar.

If you use a Kendo UI LESS-based theme, register the kendo.rtl.[min].css file too.

The following example demonstrates how to utilize the RTL support for the PanelBar.

<div id="vueapp" class="vue-app">
    <div class="k-rtl">
        <kendo-panelbar>
            <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>
                Third Item
                <ul>
                    <li>Sub Item 1</li>
                    <li>Sub Item 2</li>
                    <li>Sub Item 3</li>
                    <li>Sub Item 4</li>
                </ul>
            </li>
        </kendo-panelbar>
    </div>
</div>
Vue.use(LayoutInstaller);
new Vue({
    el: '#vueapp'
})
In this article