Change Submenu arrow
The Submenu
component accept an arrow
props. You can provide any valid ReactNode.
- Let's replace the default arrow by a unicorn!
import { Menu, Item, Separator, Submenu } from "react-contexify";
function MyMenu() {
return (
<Menu id="menu_id">
<Item>Foo</Item>
<Separator />
<Submenu label="Submenu" arrow="🦄">
<Item>Bar</Item>
</Submenu>
</Menu>
);
}
- Replace the arrow by a component
import { Menu, Item, Separator, Submenu } from "react-contexify";
function CustomArrow() {
return <div>arrow 🤘</div>;
}
function MyMenu() {
return (
<Menu id="menu_id">
<Item>Foo</Item>
<Separator />
<Submenu label="Submenu" arrow={<CustomArrow />}>
<Item>Bar</Item>
</Submenu>
</Menu>
);
}