Context menu
The Dropdown menu, opened where you right-click or long-press inside an area instead of from a button.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/context-menuExamples
Right-click a job
Right-click the job card
import { useState } from "react";import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger,} from "@/components/zero/context-menu";export default function ContextMenuJob() { const [pinned, setPinned] = useState(true); return ( <ContextMenu> <ContextMenuTrigger className="grid h-40 w-full max-w-sm place-items-center border-(length:--zero-stroke-thin) border-zero-line border-dashed font-bold font-zero text-zero-sm text-zero-text-3 italic"> Right-click the job card </ContextMenuTrigger> <ContextMenuContent> <ContextMenuItem> Take it <ContextMenuShortcut>⌘T</ContextMenuShortcut> </ContextMenuItem> <ContextMenuSub> <ContextMenuSubTrigger>Send to</ContextMenuSubTrigger> <ContextMenuSubContent> <ContextMenuItem>Mara</ContextMenuItem> <ContextMenuItem>Rui</ContextMenuItem> <ContextMenuItem>Jo</ContextMenuItem> </ContextMenuSubContent> </ContextMenuSub> <ContextMenuCheckboxItem checked={pinned} onCheckedChange={setPinned}> Pinned </ContextMenuCheckboxItem> <ContextMenuSeparator /> <ContextMenuItem danger>Abandon</ContextMenuItem> </ContextMenuContent> </ContextMenu> );}Behaviour
Its rows, labels, separators, checkbox and radio rows and submenus are the Dropdown menu's own parts under ContextMenu names. A submenu opens beside its row, which stays raised while it is open.
Props
ContextMenuTrigger
Also takes every prop of Base UI's ContextMenu.Trigger.
ContextMenuContent
Also takes every prop of Base UI's Menu.Popup.