Context Menu

A menu that appears at the pointer on right click or long press.

Right click here

import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Forward</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Reload</ContextMenuItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

Installation


pnpm dlx shadcn@latest add @coss/context-menu

Usage

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuItem,
  ContextMenuLinkItem,
  ContextMenuPopup,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubPopup,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger className="flex h-32 items-center justify-center rounded-lg border border-dashed">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuPopup>
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Forward</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuLinkItem render={<Link href="/docs" />}>
      Documentation
    </ContextMenuLinkItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
      <ContextMenuSubPopup>
        <ContextMenuItem>Inspect</ContextMenuItem>
        <ContextMenuItem>View source</ContextMenuItem>
      </ContextMenuSubPopup>
    </ContextMenuSub>
  </ContextMenuPopup>
</ContextMenu>

API Reference

ContextMenu

Root component. Alias for ContextMenu.Root from Base UI.

ContextMenuTrigger

An area that opens the menu on right click or long press. Renders a <div> element.

ContextMenuPopup

Popup container that displays the menu content at the pointer.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Side of the anchor to position the popup
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the anchor
`sideOffset`	`number`	`4`	Distance from the anchor in pixels
`alignOffset`	`number`	-	Offset along the alignment axis
`portalProps`	`ContextMenu.Portal.Props`	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Context Menu portal API

ContextMenuGroup

Groups related menu items. Alias for ContextMenu.Group from Base UI.

ContextMenuItem

Individual menu item.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons
`variant`	`"default" \| "destructive"`	`"default"`	Controls the item styling

Using inset: When mixing items with and without icons, use inset on icon-less items to maintain alignment:

<ContextMenuItem><PencilIcon /> Edit</ContextMenuItem>
<ContextMenuItem inset>Properties</ContextMenuItem>

ContextMenuLinkItem

Link menu item for navigation. LinkItem renders a native <a> when you pass href. Styled like ContextMenuItem.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons
`variant`	`"default" \| "destructive"`	`"default"`	Controls the item styling
`closeOnClick`	`boolean`	`true`	Whether the menu closes when the link is clicked

If you were using ContextMenuItem render={<Link href="..." />}, migrate to ContextMenuLinkItem but keep render — do not replace it with href alone when using a router Link.

<ContextMenuLinkItem render={<Link href="/docs" />}>Docs</ContextMenuLinkItem>

Use href only for plain anchor links:

<ContextMenuLinkItem href="/docs">Docs</ContextMenuLinkItem>

ContextMenuCheckboxItem

Checkbox menu item.

Prop	Type	Default	Description
`variant`	`"default" \| "switch"`	`"default"`	Display style - `switch` shows a toggle switch indicator

ContextMenuRadioGroup

Groups radio menu items. Alias for ContextMenu.RadioGroup from Base UI.

ContextMenuRadioItem

Radio menu item. Styled wrapper for ContextMenu.RadioItem from Base UI.

ContextMenuGroupLabel

Label for a menu group.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons

ContextMenuSeparator

Visual separator between menu items.

ContextMenuShortcut

Displays keyboard shortcut text. Custom component (not a Base UI wrapper).

ContextMenuSub

Submenu container. Alias for ContextMenu.SubmenuRoot from Base UI.

ContextMenuSubTrigger

Trigger for opening a submenu.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons

ContextMenuSubPopup

Popup for submenu content.

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to the trigger
`sideOffset`	`number`	`0`	Distance from the trigger in pixels
`alignOffset`	`number`	`-5`	Offset along the alignment axis. Defaults to `-5` when `align` is not `"center"`

Examples

With Link

Right click here

import Link from "next/link";
import {
  ContextMenu,
  ContextMenuLinkItem,
  ContextMenuPopup,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuLinkItem render={<Link href="/docs" />}>
          Docs
        </ContextMenuLinkItem>
        <ContextMenuLinkItem render={<Link href="/particles" />}>
          Particles
        </ContextMenuLinkItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

Right click here

import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSub,
  ContextMenuSubPopup,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuItem>Cut</ContextMenuItem>
        <ContextMenuItem>Copy</ContextMenuItem>
        <ContextMenuItem>Paste</ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
          <ContextMenuSubPopup>
            <ContextMenuItem>Email link</ContextMenuItem>
            <ContextMenuItem>Messages</ContextMenuItem>
            <ContextMenuItem>Notes</ContextMenuItem>
          </ContextMenuSubPopup>
        </ContextMenuSub>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Checkbox

Right click here

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuPopup,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuCheckboxItem defaultChecked>
          Show hidden files
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem>Compact view</ContextMenuCheckboxItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Group Label

Right click here

import {
  ContextMenu,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuGroup>
          <ContextMenuGroupLabel>File</ContextMenuGroupLabel>
          <ContextMenuItem>Rename</ContextMenuItem>
          <ContextMenuItem>Duplicate</ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuGroupLabel>Share</ContextMenuGroupLabel>
          <ContextMenuItem>Send copy</ContextMenuItem>
          <ContextMenuItem>Export</ContextMenuItem>
        </ContextMenuGroup>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Icons

Right click here

import { CopyIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react";
import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuItem>
          <PencilIcon aria-hidden="true" />
          Edit
          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <CopyIcon aria-hidden="true" />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <ShareIcon aria-hidden="true" />
          Share
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <TrashIcon aria-hidden="true" />
          Delete
          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Radio Group

Right click here

import {
  ContextMenu,
  ContextMenuPopup,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuRadioGroup defaultValue="system">
          <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
          <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
          <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Switch

ContextMenuCheckboxItem supports a variant="switch" prop that displays a decorative switch indicator instead of a checkmark. This is a purely visual variant — the component remains a checkbox item with the same functionality.

Right click here

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuPopup,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuCheckboxItem defaultChecked variant="switch">
          Auto save
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem variant="switch">
          Show preview
        </ContextMenuCheckboxItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}