Skip to main content

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