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.
- <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>
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".
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.