> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Context Menu

> A right-click triggered floating menu — provides contextual actions for the element under the cursor.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",gap:"24px",flexWrap:"wrap",alignItems:"flex-start"}}>
  <div style={{display:"flex",flexDirection:"column",gap:"8px",fontFamily:"Inter,sans-serif",width:"100%",maxWidth:"420px"}}>
    <div style={{background:"#F0F9FF",border:"2px dashed #93C5FD",borderRadius:"10px",padding:"32px",textAlign:"center",fontSize:"13px",color:"#667085"}}>
      Right-click anywhere in this area
    </div>

    <div style={{background:"#fff",border:"1px solid #E5E7EB",borderRadius:"10px",boxShadow:"0 4px 16px rgba(0,0,0,0.1)",padding:"4px",width:"200px"}}>
      {[
                  {icon:"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z",label:"Edit",shortcut:"⌘E"},
                  {icon:"M9 9h13 M9 15h13 M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",label:"Copy link",shortcut:"⌘C"},
                ].map((item,i) => (
                  <div key={i} style={{padding:"7px 10px",display:"flex",alignItems:"center",gap:"8px",fontSize:"13px",color:"#344054",borderRadius:"6px",cursor:"pointer"}}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" strokeWidth="2">
                      {item.icon.split("M").filter(Boolean).map((seg,j)=><path key={j} d={"M"+seg}/>)}
                    </svg>
                    {item.label}
                    <span style={{marginLeft:"auto",fontSize:"11px",color:"#9CA3AF"}}>{item.shortcut}</span>
                  </div>
                ))}

      <div style={{height:"1px",background:"#F2F4F7",margin:"4px 0"}} />

      <div style={{padding:"7px 10px",display:"flex",alignItems:"center",gap:"8px",fontSize:"13px",color:"#DC2626",borderRadius:"6px",cursor:"pointer"}}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
          <polyline points="3 6 5 6 21 6" />

          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
        </svg>

        Delete
        <span style={{marginLeft:"auto",fontSize:"11px",color:"#FDA29B"}}>⌫</span>
      </div>
    </div>
  </div>
</div>

**Context Menu** opens on right-click (or long-press on mobile) over a target area, providing context-sensitive actions for that element. It shares the same item primitives as `DropdownMenu`.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from "@araf-ds/core"

export default function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="border-2 border-dashed rounded-lg p-8 text-sm text-muted-foreground">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuItem>
          <EditIcon size={13} /> Edit
          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <LinkIcon size={13} /> Copy link
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <TrashIcon size={13} /> Delete
          <ContextMenuShortcut>⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

***

## Variants

### With Checkbox and Radio Items

```tsx theme={null}
<ContextMenuContent>
  <ContextMenuCheckboxItem
    checked={showBookmarks}
    onCheckedChange={setShowBookmarks}
  >
    Show bookmarks <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
  </ContextMenuCheckboxItem>
  <ContextMenuSeparator />
  <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
    <ContextMenuLabel>People</ContextMenuLabel>
    <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
    <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
  </ContextMenuRadioGroup>
</ContextMenuContent>
```

### Table Row Context Menu

```tsx theme={null}
<ContextMenu>
  <ContextMenuTrigger asChild>
    <TableRow className="cursor-context-menu">
      <TableCell>{row.name}</TableCell>
      <TableCell>{row.status}</TableCell>
    </TableRow>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onSelect={() => editRow(row.id)}>
      <EditIcon size={13} /> Edit
    </ContextMenuItem>
    <ContextMenuItem onSelect={() => duplicateRow(row.id)}>
      <CopyIcon size={13} /> Duplicate
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive" onSelect={() => deleteRow(row.id)}>
      <TrashIcon size={13} /> Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

***

## API Reference

### ContextMenuContent

<ParamField path="alignOffset" type="number" default="0">
  Offset from the cursor position on the alignment axis.
</ParamField>

<ParamField path="className" type="string">
  Additional class names for the menu panel.
</ParamField>

### ContextMenuItem

<ParamField path="variant" type="string" default="default">
  Visual style. `"destructive"` renders item text in red.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Disables the item.
</ParamField>

<ParamField path="onSelect" type="() => void">
  Callback fired when item is selected. Menu closes automatically.
</ParamField>

***

## Accessibility

* Context Menu opens at the cursor position with `role="menu"`
* `ContextMenuTrigger` area does not show a visual indicator — consider adding a subtle hint for discoverability
* Keyboard: `Shift+F10` or the Menu key opens context menu at the focused element
* All the same keyboard navigation as `DropdownMenu` applies (Arrow keys, Enter, Escape)

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use Context Menu for actions directly tied to the right-clicked element
    * Include keyboard shortcuts to mirror native OS conventions
    * Keep items to 5–8 max — only actions relevant to that specific element
    * Use on data-dense areas: table rows, file lists, canvas elements
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't rely solely on right-click — always provide primary action buttons too
    * Don't use Context Menu as a main navigation mechanism
    * Don't add items that aren't contextually relevant to the trigger area
    * Don't show a Context Menu on mobile without a fallback (long-press isn't obvious)
  </Card>
</CardGroup>