Change sub menu position in React Menu component
30 Jan 20239 minutes to read
The submenu position can be changed by using the beforeOpen
event. Assign the top and left position where you want to open the submenu to the beforeOpen
event arguments args.top
and args.left
respectively.
In the below sample, the sub menu opens above the parent menu item.
import { closest, 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() {
// Menu items definition
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: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Go' },
{ text: 'Help' }
];
function onBeforeOpen(args) {
// Getting parent menu item element offset
const relativeOffset = closest(args.event.target, '.e-menu-item').getBoundingClientRect();
// Getting sub menu wrapper element using closest method
const subMenuEle = closest(args.element, '.e-menu-wrapper');
subMenuEle.style.display = 'block';
args.top = (relativeOffset.top - subMenuEle.getBoundingClientRect().height) + pageYOffset;
args.left = relativeOffset.left + pageXOffset;
subMenuEle.style.display = '';
}
return (<MenuComponent items={menuItems} beforeOpen={onBeforeOpen}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { closest, enableRipple} from '@syncfusion/ej2-base';
import { BeforeOpenCloseMenuEventArgs, MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
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: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Go' },
{ text: 'Help' }
];
function onBeforeOpen(args: BeforeOpenCloseMenuEventArgs) {
// Getting parent menu item element offset
const relativeOffset = closest(args.event.target as Element, '.e-menu-item').getBoundingClientRect();
// Getting sub menu wrapper element using closest method
const subMenuEle = closest(args.element, '.e-menu-wrapper') as HTMLElement;
subMenuEle.style.display = 'block';
args.top = (relativeOffset.top - subMenuEle.getBoundingClientRect().height) + pageYOffset;
args.left = relativeOffset.left + pageXOffset;
subMenuEle.style.display = '';
}
return (
<MenuComponent items={menuItems} beforeOpen={onBeforeOpen}/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
For custom positioning, set both
top
andleft
position in thebeforeOpen
event.