Context menu
Showing Menu when right-clicking on an element using the getAnchorRect
prop to determine the position of the popover.
1234567891011121314151617181920212223242526272829303132333435363738
import "./style.css";import { useState } from "react";import * as Ariakit from "@ariakit/react";export default function Example() {const [anchorRect, setAnchorRect] = useState({ x: 0, y: 0 });return (<divclassName="wrapper"onContextMenu={(event) => {event.preventDefault();setAnchorRect({ x: event.clientX, y: event.clientY });menu.show();}}>Right click hereclassName="menu">ForwardView Page Source</div>);}import "./style.css";import { useState } from "react";import * as Ariakit from "@ariakit/react";export default function Example() {const [anchorRect, setAnchorRect] = useState({ x: 0, y: 0 });return (<divclassName="wrapper"onContextMenu={(event) => {event.preventDefault();setAnchorRect({ x: event.clientX, y: event.clientY });menu.show();}}>Right click hereclassName="menu">ForwardView Page Source</div>);}
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.