Context Menu

A right-click context menu that displays contextual actions for a specific element, following native OS menu conventions.

Preview

Right click here

Usage

tsx

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from "zostel-ui";

<ContextMenu>
  <ContextMenuTrigger className="h-40 w-full rounded-xl border-2 border-dashed">
    Right-click here
  </ContextMenuTrigger>
  <ContextMenuContent className="w-52">
    <ContextMenuItem>
      View Details <ContextMenuShortcut>Enter</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Open in New Tab <ContextMenuShortcut>Ctrl+Enter</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Save to Wishlist</ContextMenuItem>
    <ContextMenuItem>Share</ContextMenuItem>
    <ContextMenuItem>Copy Link</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem className="text-red-600">
      Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Props

Prop	Type	Default	Description
`onOpenChange`	`(open: boolean) => void`	—	Callback when the open state changes
`modal`	`boolean`	true	Whether the context menu is modal

onOpenChange

Type: (open: boolean) => void

Default: —

Callback when the open state changes

modal

Type: boolean

Default: true

Whether the context menu is modal

Previous Dropdown Menu Next Popover