Context Menu

'use client';

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@/registry/san-francisco/ui/context-menu';

const triggerClass =
  'text-muted-foreground flex h-32 w-60 items-center justify-center rounded-lg border border-dashed text-sm';

export default function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className={triggerClass}>Right click here</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Forward</ContextMenuItem>
        <ContextMenuItem>Reload</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>View Source</ContextMenuItem>
        <ContextMenuItem>Inspect</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

'use client';

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@/registry/san-francisco/ui/context-menu';

const triggerClass =
  'text-muted-foreground flex h-32 w-60 items-center justify-center rounded-lg border border-dashed text-sm';

export default function ContextMenuDemoSubmenus() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className={triggerClass}>Right click here</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Cut</ContextMenuItem>
        <ContextMenuItem>Copy</ContextMenuItem>
        <ContextMenuItem>Paste</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Save Page As</ContextMenuItem>
            <ContextMenuItem>Create Shortcut</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  );
}

'use client';

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@/registry/san-francisco/ui/context-menu';

const triggerClass =
  'text-muted-foreground flex h-32 w-60 items-center justify-center rounded-lg border border-dashed text-sm';

export default function ContextMenuDemoCheckbox() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className={triggerClass}>Right click here</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuGroup>
          <ContextMenuLabel>Appearance</ContextMenuLabel>
          <ContextMenuSeparator />
          <ContextMenuCheckboxItem checked>Status Bar</ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem>Activity Bar</ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem>Panel</ContextMenuCheckboxItem>
        </ContextMenuGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}