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
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 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
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
Feedback