Context Menu

Right click here

<div
  class="pk-context-target"
  data-pk-context-menu="demo-context-menu"
  style="
    display: grid;
    place-items: center;
    width: 18rem;
    height: 9rem;
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
  "
>
  Right click here
</div>

<div class="dropdown-menu" id="demo-context-menu" popover style="width: 16rem">
  <button class="dropdown-menu-item" type="button">
    Back <span class="dropdown-menu-shortcut kbd-group"><kbd class="kbd">⌘</kbd><kbd class="kbd">[</kbd></span>
  </button>
  <button class="dropdown-menu-item" type="button" aria-disabled="true">
    Forward <span class="dropdown-menu-shortcut kbd-group"><kbd class="kbd">⌘</kbd><kbd class="kbd">]</kbd></span>
  </button>
  <button class="dropdown-menu-item" type="button">
    Reload <span class="dropdown-menu-shortcut kbd-group"><kbd class="kbd">⌘</kbd><kbd class="kbd">R</kbd></span>
  </button>

  <button class="dropdown-menu-item dropdown-menu-sub-trigger" type="button" popovertarget="context-more">
    More tools
  </button>
  <div class="dropdown-menu" id="context-more" popover style="width: 12rem">
    <button class="dropdown-menu-item" type="button">Save page</button>
    <button class="dropdown-menu-item" type="button">Create shortcut</button>
    <hr class="dropdown-menu-separator" />
    <button class="dropdown-menu-item" type="button">Developer tools</button>
  </div>

  <hr class="dropdown-menu-separator" />

  <button class="dropdown-menu-checkbox-item" type="button" aria-checked="true" data-pk-keep-open>
    <span class="dropdown-menu-item-indicator">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 6 9 17l-5-5"></path>
      </svg>
    </span>
    Show bookmarks
  </button>
  <button class="dropdown-menu-checkbox-item" type="button" data-pk-keep-open>
    <span class="dropdown-menu-item-indicator">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 6 9 17l-5-5"></path>
      </svg>
    </span>
    Show full URLs
  </button>

  <hr class="dropdown-menu-separator" />

  <div class="dropdown-menu-radio-group">
    <div class="dropdown-menu-label">People</div>
    <button class="dropdown-menu-radio-item" type="button" aria-checked="true" data-value="ada">
      <span class="dropdown-menu-item-indicator"><span></span></span>
      Ada Lovelace
    </button>
    <button class="dropdown-menu-radio-item" type="button" data-value="grace">
      <span class="dropdown-menu-item-indicator"><span></span></span>
      Grace Hopper
    </button>
  </div>
</div>

Usage

<div data-pk-context-menu="page-menu">Right click here</div>

<div class="dropdown-menu" id="page-menu" popover>
  <button class="dropdown-menu-item" type="button">Back</button>
  …
</div>

The panel is a dropdown menu — same classes, same roles, same keyboard handling. Only the way it is summoned differs: data-pk-context-menu on any element opens the menu where the pointer is, instead of under a trigger.

Attribute	On	Meaning
`data-pk-context-menu`	The target	The id of the menu to open

Everything else — items, checkbox items, radio groups, submenus, separators, labels, shortcuts — is documented on the dropdown menu page.

Why it is not its own set of classes

shadcn/ui ships Context Menu and Dropdown Menu as two components because React needs two different pieces of state. The rendered result is the same menu, so partialkit ships the styling once and lets the trigger decide. One set of classes to learn, one to keep consistent.

RTL

Set dir="rtl" on the page or on any subtree — the menu opens toward the leading edge and flips when it would overflow. See the button page for a live example.

Accessibility

A context menu is a shortcut, never the only route. Every command in it must also be reachable by a visible control — a right click cannot be discovered, and touch has no equivalent.
The target is focusable. partialkit gives it tabindex="0" so the context-menu key and Shift+F10 have somewhere to fire from; opened that way, the menu appears against the element rather than at the top corner.
The menu keeps the full keyboard pattern: arrows move, typing jumps, Escape closes and returns focus, Tab closes.
Announce what it acts on. A menu that appears over a row should say which row — put a .dropdown-menu-label at the top when the target is not obvious.