DevExtreme Angular - Change the Orientation

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

HTML
TypeScript
  • <dx-menu ...
  • orientation="horizontal"> <!-- or "vertical" -->
  • </dx-menu>
  • import { DxMenuModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @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".

HTML
TypeScript
  • <dx-menu ...
  • submenuDirection="rightToTop"
  • orientation="horizontal"> <!-- or "vertical" -->
  • </dx-menu>
  • import { DxMenuModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxMenuModule
  • ],
  • // ...
  • })
See Also