Components
Root wrapper whose children receive a right-click handler to open an overlaying menu. Exposes compound components for menu items, item sections and nested sub-menus with automatic focus trapping, supports DropdownMenu positioning properties and automatically fits into the viewport.
npx @21st-dev/cli add reshaped/reshaped-context-menuLoading preview...
import { Reshaped, View } from "reshaped/bundle";
import ContextMenu from "@/components/ui/reshaped-context-menu";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<ContextMenu>
<View
height={50}
width={50}
backgroundColor="neutral-faded"
borderRadius="medium"
justify="center"
align="center"
/>
<ContextMenu.Content>
<ContextMenu.Section>
<ContextMenu.Item>Action 1</ContextMenu.Item>
<ContextMenu.Item>Action 2</ContextMenu.Item>
</ContextMenu.Section>
<ContextMenu.Section>
<ContextMenu.Item>Action 3</ContextMenu.Item>
<ContextMenu.Item>Action 4</ContextMenu.Item>
</ContextMenu.Section>
</ContextMenu.Content>
</ContextMenu>
</div>
</Reshaped>
);
}