All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Change the Orientation

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

jQuery
JavaScript
$(function () {
    $("#menuContainer").dxMenu({
        items: menuItems,
        orientation: "horizontal" // or "vertical"
    });
});
Angular
HTML
TypeScript
<dx-menu
    [items]="menuItems"
    orientation="horizontal"> <!-- or "vertical" -->
</dx-menu>
import { DxMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
    menuItems = [ ... ];
}
@NgModule({
    imports: [
        // ...
        DxMenuModule
    ],
    // ...
})

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

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

When the widget 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 option to "rightOrTop".

jQuery
JavaScript
$(function () {
    $("#menuContainer").dxMenu({
        items: menuItems,
        orientation: "horizontal", // or "vertical"
        submenuDirection: "rightToTop"
    });
});
Angular
HTML
TypeScript
<dx-menu
    [items]="menuItems"
    submenuDirection="rightToTop"
    orientation="horizontal"> <!-- or "vertical" -->
</dx-menu>
import { DxMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
    menuItems = [ ... ];
}
@NgModule({
    imports: [
        // ...
        DxMenuModule
    ],
    // ...
})
See Also