Context Menu

Preview

Right click here

import { useState } from "react";
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
} from "@/components/ui/ContextMenu";

export function ContextMenuDemo() {
  return (
  <ContextMenu>
    <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-gray-6 text-sm">
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent className="w-18">
      <ContextMenuItem>
        Back
        <ContextMenuShortcut>⌘[</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem disabled>
        Forward
        <ContextMenuShortcut>⌘]</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem>
        Reload
        <ContextMenuShortcut>⌘R</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem>
        Save As...
        <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
      </ContextMenuItem>
      <ContextMenuItem>Print...</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
);
}

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

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

Usage

WithSubmenu

export const WithSubmenu = () => (
  <ContextMenu>
    <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-gray-6 text-sm">
      Right click here
    </ContextMenuTrigger>
    <ContextMenuContent className="w-18">
      <ContextMenuItem>Back</ContextMenuItem>
      <ContextMenuItem>Forward</ContextMenuItem>
      <ContextMenuItem>Reload</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuSub>
        <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
        <ContextMenuSubContent className="w-18">
          <ContextMenuItem>
            Save Page As...
            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem>Create Shortcut...</ContextMenuItem>
          <ContextMenuItem>Name Window...</ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem>Developer Tools</ContextMenuItem>
        </ContextMenuSubContent>
      </ContextMenuSub>
      <ContextMenuSeparator />
      <ContextMenuItem>
        Inspect
        <ContextMenuShortcut>⌥⌘I</ContextMenuShortcut>
      </ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
);

WithCheckboxes

export const WithCheckboxes = () => {
  const [showBookmarksBar, setShowBookmarksBar] = useState(true);
  const [showFullUrls, setShowFullUrls] = useState(false);

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-gray-6 text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-18">
        <ContextMenuCheckboxItem
          checked={showBookmarksBar}
          onCheckedChange={setShowBookmarksBar}
        >
          Show Bookmarks Bar
          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem
          checked={showFullUrls}
          onCheckedChange={setShowFullUrls}
        >
          Show Full URLs
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  );
};

WithRadioGroup

export const WithRadioGroup = () => {
  const [person, setPerson] = useState("pedro");

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-gray-6 text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-18">
        <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
          <ContextMenuLabel>People</ContextMenuLabel>
          <ContextMenuSeparator />
          <ContextMenuRadioItem value="pedro">
            Pedro Duarte
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
};

ComplexMenu

export const ComplexMenu = () => {
  const [showBookmarksBar, setShowBookmarksBar] = useState(true);
  const [showFullUrls, setShowFullUrls] = useState(false);
  const [person, setPerson] = useState("pedro");

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-gray-6 text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-20">
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem
          checked={showBookmarksBar}
          onCheckedChange={setShowBookmarksBar}
        >
          Show Bookmarks Bar
          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem
          checked={showFullUrls}
          onCheckedChange={setShowFullUrls}
        >
          Show Full URLs
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
          <ContextMenuLabel>People</ContextMenuLabel>
          <ContextMenuSeparator />
          <ContextMenuRadioItem value="pedro">
            Pedro Duarte
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
};

Props

ContextMenu

Prop	Type	Default
All props from	`ContextMenuRadix.Root`	-

ContextMenuTrigger

Prop	Type	Default
All props from	`ContextMenuRadix.Trigger`	-

ContextMenuContent

Prop	Type	Default
All props from	`ContextMenuRadix.Content`	-

ContextMenuItem

Prop	Type	Default
All props from	`ContextMenuRadix.Item`	-

ContextMenuCheckboxItem

Prop	Type	Default
All props from	`ContextMenuRadix.CheckboxItem`	-

ContextMenuRadioItem

Prop	Type	Default
All props from	`ContextMenuRadix.RadioItem`	-

ContextMenuLabel

Prop	Type	Default
All props from	`ContextMenuRadix.Label`	-

ContextMenuSeparator

Prop	Type	Default
All props from	`ContextMenuRadix.Separator`	-

ContextMenuShortcut

Prop	Type	Default
All props from	`"span"`	-

ContextMenuGroup

Prop	Type	Default
All props from	`ContextMenuRadix.Group`	-

ContextMenuPortal

Prop	Type	Default
All props from	`ContextMenuRadix.Portal`	-

ContextMenuSub

Prop	Type	Default
All props from	`ContextMenuRadix.Sub`	-

ContextMenuSubContent

Prop	Type	Default
All props from	`ContextMenuRadix.SubContent`	-

ContextMenuSubTrigger

Prop	Type	Default
All props from	`ContextMenuRadix.SubTrigger`	-

ContextMenuRadioGroup

Prop	Type	Default
All props from	`ContextMenuRadix.RadioGroup`	-

On this page