Ariakit
/

Context menu

Showing Menu when right-clicking on an element using the getAnchorRect prop to determine the position of the popover.

Right click here
import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import "./style.css";
export default function Example() {
const [anchorRect, setAnchorRect] = useState({ x: 0, y: 0 });
const menu = Ariakit.useMenuStore();
return (
<div
className="wrapper"
onContextMenu={(event) => {
event.preventDefault();
setAnchorRect({ x: event.clientX, y: event.clientY });
menu.show();
}}
>
Right click here
store={menu}
getAnchorRect={() => anchorRect}
className="menu"
>
<Ariakit.MenuItem className="menu-item">Back</Ariakit.MenuItem>
<Ariakit.MenuItem className="menu-item" disabled>
Forward
<Ariakit.MenuItem className="menu-item">Reload</Ariakit.MenuItem>
<Ariakit.MenuSeparator className="separator" />
<Ariakit.MenuItem className="menu-item">
View Page Source
<Ariakit.MenuItem className="menu-item">Inspect</Ariakit.MenuItem>
</div>
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue