How to change orientation in Vue Menu Bar

21 Aug 20268 minutes to read

Orientation in menu items can be changed horizontally or vertically using the orientation property. By default, it is horizontally aligned.

<template>
    <div>
        <ejs-menu :items='menuItems' orientation='Vertical'></ejs-menu>
    </div>
</template>

<script setup>

import { MenuComponent as EjsMenu } from "@syncfusion/ej2-vue-navigations";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const menuItems = [
    {
        text: 'File',
        items: [
            { text: 'Open' },
            { text: 'Save' },
            { text: 'Exit' }
        ]
    },
    {
        text: 'Edit',
        items: [
            { text: 'Cut' },
            { text: 'Copy' },
            { text: 'Paste' }
        ]
    },
    {
        text: 'View',
        items: [
            { text: 'Toolbar' },
            { text: 'Sidebar' },
            { text: 'Full Screen' }
        ]
    },
    {
        text: 'Tools',
        items: [
            { text: 'Spelling & Grammar' },
            { text: 'Customize' },
            { text: 'Options' }
        ]
    },
    { text: 'Help' }
];
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

body {
    margin-top: 100px;
    text-align: center;
}
</style>
<template>
    <div>
        <ejs-menu :items='menuItems' orientation='Vertical'></ejs-menu>
    </div>
</template>

<script>

import { MenuComponent } from "@syncfusion/ej2-vue-navigations";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-menu": MenuComponent
    },
    data: function () {
        return {
            menuItems: [
                {
                    text: 'File',
                    items: [
                        { text: 'Open' },
                        { text: 'Save' },
                        { text: 'Exit' }
                    ]
                },
                {
                    text: 'Edit',
                    items: [
                        { text: 'Cut' },
                        { text: 'Copy' },
                        { text: 'Paste' }
                    ]
                },
                {
                    text: 'View',
                    items: [
                        { text: 'Toolbar' },
                        { text: 'Sidebar' },
                        { text: 'Full Screen' }
                    ]
                },
                {
                    text: 'Tools',
                    items: [
                        { text: 'Spelling & Grammar' },
                        { text: 'Customize' },
                        { text: 'Options' }
                    ]
                },
                { text: 'Help' }
            ]
        };

    }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

body {
    margin-top: 100px;
    text-align: center;
}
</style>