Having trouble getting help?
Contact Support
Contact Support
Change orientation in React Menu component
29 Aug 20237 minutes to read
Orientation in menu items can be changed horizontally or vertically using the orientation
property. By default, it is horizontally aligned.
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let menuItems = [
{
items: [
{ text: 'Open' },
{ text: 'Save' },
{ text: 'Exit' }
],
text: 'File'
},
{
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
],
text: 'Edit'
},
{
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' },
{ text: 'Full Screen' }
],
text: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Help' }
];
return (<MenuComponent items={menuItems} orientation="Vertical"/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let menuItems: MenuItemModel[] = [
{
items: [
{ text: 'Open' },
{ text: 'Save' },
{ text: 'Exit' }
],
text: 'File'
},
{
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
],
text: 'Edit'
},
{
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' },
{ text: 'Full Screen' }
],
text: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Help' }
];
return (
<MenuComponent items={menuItems} orientation="Vertical"/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));