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>
  );
}