JavaScript/jQuery Menu - Change the Orientation

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

JavaScript
HTML
  • $(function() {
  • $("#menuContainer").dxMenu({
  • // ...
  • orientation: "horizontal" // or "vertical"
  • });
  • });
  • <div id="menuContainer"></div>

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

JavaScript
HTML
  • $(function() {
  • $("#menuContainer").dxMenu({
  • items: menuItems,
  • orientation: "horizontal", // or "vertical"
  • submenuDirection: "rightToTop"
  • });
  • });
  • <div id="menuContainer"></div>
See Also