All docs
V20.2
22.2 (CTP)
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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.common.css';
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.common.css';
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.common.css';
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.common.css';
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