Angular Menu - Change the Orientation

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

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 UI component. For example, the following code shifts the UI component towards the bottom.

HTML
  • <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".

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