Vue Menu - Change the Orientation

To arrange items on the menu panel in a row (horizontally) or in a column (vertically), use the orientation property.

jQuery
JavaScript
HTML
$(function() {
    $("#menuContainer").dxMenu({
        // ...
        orientation: "horizontal" // or "vertical"
    });
});
<div id="menuContainer"></div>
Angular
HTML
TypeScript
<dx-menu ...
    orientation="horizontal"> <!-- or "vertical" -->
</dx-menu>
import { DxMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMenuModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMenu ...
        orientation="horizontal" <!-- or "vertical" -->
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxMenu from 'devextreme-vue/menu';

export default {
    components: {
        DxMenu
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Menu } from 'devextreme-react/menu';

class App extends React.Component {
    render() {
        return (
            <Menu ...
                orientation="horizontal" {/* or "vertical" */}
            />
        );
    }
}

export default App;

If you need to shift the menu panel towards the bottom or the left side, specify padding for the <div> that contains the UI component. For example, the following code shifts the UI component towards the bottom.

HTML
<div id="menuContainer" style="padding-top:500px"></div>

When the UI component is positioned at the bottom or at the left side, you may want to change the direction in which the drop-down menus open. For this purpose, set the submenuDirection property to "rightOrTop".

jQuery
JavaScript
HTML
$(function() {
    $("#menuContainer").dxMenu({
        items: menuItems,
        orientation: "horizontal", // or "vertical"
        submenuDirection: "rightToTop"
    });
});
<div id="menuContainer"></div>
Angular
HTML
TypeScript
<dx-menu ...
    submenuDirection="rightToTop"
    orientation="horizontal"> <!-- or "vertical" -->
</dx-menu>
import { DxMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMenuModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMenu ...
        submenu-direction="rightToTop"
        orientation="horizontal" <!-- or "vertical" -->
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxMenu from 'devextreme-vue/menu';

export default {
    components: {
        DxMenu
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Menu } from 'devextreme-react/menu';

class App extends React.Component {
    render() {
        return (
            <Menu ...
                submenuDirection="rightToTop"
                orientation="horizontal" {/* or "vertical" */}
            />
        );
    }
}

export default App;
See Also