https://i.sstatic.net/aNeJY.jpg
In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to modify this behavior and have the child submenu open below its parent item instead?
import React from 'react';
import { MenuItem } from '@blueprintjs/core';
import Style from './styled';
const leftMenu = () => {
const Items = createNav.map(menuItem => {
let children;
if ('children' in menuItem) {
children = menuItem.children.map(child => {
return (
<MenuItem
icon={child.icon}
text={child.title}
href={child.path}
key={menuItem.path}
/>
);
});
}
return (
<Style.MenuItem
icon={menuItem.icon}
text={menuItem.title}
href={menuItem.path}
key={menuItem.path}
>
{children}
</Style.MenuItem>
);
});
return <Style.Menu>{Items}</Style.Menu>;
};
export default LeftMenu;
I utilized styled-components for styling purposes.
const Menu = styled(bpMenu)`
padding: 0 !important;
background-color: transparent !important;
`;
const MenuItem = styled(Item)`
background-color: red ;
margin: 5px;
`;