Vue Menu - Change the Orientation
To arrange items on the menu panel in a row (horizontally) or in a column (vertically), use the orientation property.
jQuery
$(function() { $("#menuContainer").dxMenu({ // ... orientation: "horizontal" // or "vertical" }); });
<div id="menuContainer"></div>
Angular
<dx-menu ... orientation="horizontal"> <!-- or "vertical" --> </dx-menu>
import { DxMenuModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxMenuModule ], // ... })
Vue
<template> <DxMenu ... orientation="horizontal" <!-- or "vertical" --> /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxMenu from 'devextreme-vue/menu'; export default { components: { DxMenu } }; </script>
React
import React from 'react'; 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.
<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
$(function() { $("#menuContainer").dxMenu({ items: menuItems, orientation: "horizontal", // or "vertical" submenuDirection: "rightToTop" }); });
<div id="menuContainer"></div>
Angular
<dx-menu ... submenuDirection="rightToTop" orientation="horizontal"> <!-- or "vertical" --> </dx-menu>
import { DxMenuModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxMenuModule ], // ... })
Vue
<template> <DxMenu ... submenu-direction="rightToTop" orientation="horizontal" <!-- or "vertical" --> /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxMenu from 'devextreme-vue/menu'; export default { components: { DxMenu } }; </script>
React
import React from 'react'; 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
If you have technical questions, please create a support ticket in the DevExpress Support Center.