Usage
Right click here
import { Button, ContextMenu } from "@chimera-ui/components";
import { useState } from "react";
import {
CheckIcon,
ChevronRightIcon,
DotFilledIcon,
} from "@radix-ui/react-icons";
export function ContextMenuDemo() {
const [bookmarksChecked, setBookmarksChecked] = useState(true);
const [urlsChecked, setUrlsChecked] = useState(false);
const [person, setPerson] = useState("pedro");
return (
<ContextMenu.Root>
<ContextMenu.Trigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-slate-200 text-sm dark:border-slate-700">
Right click here
</ContextMenu.Trigger>
<ContextMenu.Content className="w-64">
<ContextMenu.Item inset>
Back
<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item inset disabled>
Forward
<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item inset>
Reload
<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger inset>More Tools</ContextMenu.SubTrigger>
<ContextMenu.SubContent className="w-48">
<ContextMenu.Item>
Save Page As...
<ContextMenu.Shortcut>⇧⌘S</ContextMenu.Shortcut>
</ContextMenu.Item>
<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
<ContextMenu.Item>Name Window...</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>Developer Tools</ContextMenu.Item>
</ContextMenu.SubContent>
</ContextMenu.Sub>
<ContextMenu.Separator />
<ContextMenu.CheckboxItem checked>
Show Bookmarks Bar
<ContextMenu.Shortcut>⌘⇧B</ContextMenu.Shortcut>
</ContextMenu.CheckboxItem>
<ContextMenu.CheckboxItem>Show Full URLs</ContextMenu.CheckboxItem>
<ContextMenu.Separator />
<ContextMenu.RadioGroup value={person} onValueChange={setPerson}>
<ContextMenu.Label inset>People</ContextMenu.Label>
<ContextMenu.Separator />
<ContextMenu.RadioItem value="pedro">
Pedro Duarte
</ContextMenu.RadioItem>
<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>
</ContextMenu.Content>
</ContextMenu.Root>
);
}