ContextMenu

A versatile context menu component that supports right-click, left-click, and hover interactions with intelligent positioning and keyboard navigation.

Install Dependencies

npx quickcode-ui add ContextMenu

pnpm dlx quickcode-ui add ContextMenu

yarn dlx quickcode-ui add ContextMenu

bunx quickcode-ui add ContextMenu

Right Click

Right click here

Hover

Hover Navigation

onClick

On Click

import { ContextMenu } from "@/components/ui/ContextMenu";
import { useState } from "react";

export const AdvancedFeaturesExample = () => {
  const [showBookmarks, setShowBookmarks] = useState(true);
  const [showFullURLs, setShowFullURLs] = useState(false);
  const [selectedPerson, setSelectedPerson] = useState("john");

  return (
    <ContextMenu>
      <ContextMenu.Trigger triggerOn="click">
        <button className="inline-flex h-10 items-center justify-center rounded-md border border-border bg-background px-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground">
          Click for Advanced Menu
        </button>
      </ContextMenu.Trigger>
      <ContextMenu.Content className="w-56">
        <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>
            <ContextMenu.Item>Save Page</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={showBookmarks}
          onCheckedChange={setShowBookmarks}
        >
          Show Bookmarks Bar
        </ContextMenu.CheckboxItem>
        <ContextMenu.CheckboxItem
          checked={showFullURLs}
          onCheckedChange={setShowFullURLs}
        >
          Show Full URLs
        </ContextMenu.CheckboxItem>

        <ContextMenu.Separator />
        
        <ContextMenu.RadioGroup value={selectedPerson} onValueChange={setSelectedPerson}>
          <ContextMenu.Label inset>Assign To</ContextMenu.Label>
          <ContextMenu.RadioItem value="john">John Doe</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="jane">Jane Smith</ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="bob">Bob Johnson</ContextMenu.RadioItem>
        </ContextMenu.RadioGroup>

        <ContextMenu.Separator />
        <ContextMenu.Item variant="destructive">Delete Workspace</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu>
  );
};

Props

ContextMenu

Root component that provides context for all child components.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Child components including Trigger and Content

ContextMenu.Trigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Element that triggers the context menu
`triggerOn`	`"contextmenu" \| "click" \| "hover"`	`"contextmenu"`	Determines how the menu is triggered
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.Content

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Menu items and other content
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.Item

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Item content
`inset`	`boolean`	`false`	Adds left padding for alignment with items that have icons
`disabled`	`boolean`	`false`	Disables the menu item
`variant`	`"default" \| "destructive"`	`"default"`	Visual style of the item
`onClick`	`() => void`	`undefined`	Click handler function
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.CheckboxItem

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Item content
`checked`	`boolean`	`false`	Checkbox checked state
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	Callback when checked state changes
`disabled`	`boolean`	`false`	Disables the checkbox item
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.RadioGroup

Prop	Type	Default	Description
`value`	`string`	`undefined`	Currently selected radio value
`onValueChange`	`(value: string) => void`	`undefined`	Callback when selection changes
`children`	`React.ReactNode`	—	RadioItem components

ContextMenu.RadioItem

Prop	Type	Default	Description
`value`	`string`	—	Unique value for this radio option
`children`	`React.ReactNode`	—	Item content
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.Sub

Container for submenu functionality.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	SubTrigger and SubContent components

ContextMenu.SubTrigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Trigger content with automatic arrow indicator
`inset`	`boolean`	`false`	Adds left padding for alignment
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.SubContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Submenu items
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.Separator

Visual separator between menu sections.

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.Label

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Label text
`inset`	`boolean`	`false`	Adds left padding for alignment
`className`	`string`	`undefined`	Additional CSS classes

ContextMenu.Shortcut

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Keyboard shortcut text
`className`	`string`	`undefined`	Additional CSS classes