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.
- <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.
- <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".
- <dx-menu ...
- submenuDirection="rightToTop"
- orientation="horizontal"> <!-- or "vertical" -->
- </dx-menu>
- import { DxMenuModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxMenuModule
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.