Right-click

html

<div class="rc-demo" style="--accent:#D9C8F0;">
  <div class="rc-demo__item">&#128196; budget-2026.xlsx</div>
  
  <div class="rc-demo__menu">
    <div class="rc-demo__cursor">&#8598;</div>
    <button type="button" class="rc-demo__item-row">Rename</button>
    <button type="button" class="rc-demo__item-row">Duplicate</button>
    <button type="button" class="rc-demo__item-row rc-demo__item-row--danger">Delete</button>
  </div>
  
  <p class="rc-demo__caption">right-click (or long-press on touch) opens the context menu{{unless open}}rest state

tailwind

<div class="relative" style="width:260px;font-family:system-ui,sans-serif;color:#241430">
  <div class="w-fit px-3 py-2.5 rounded-lg bg-[#24143010]">&#128196; budget-2026.xlsx</div>
  
  <div class="relative mt-2 w-40 rounded-[10px] p-1.5" style="background:#FAF7F2;box-shadow:0 12px 26px rgba(36,20,48,.2);border:1.5px solid #24143014">
    <div class="absolute -top-3.5 -left-1.5 text-base" style="color:#D9C8F0">&#8598;</div>
    <button type="button" class="block w-full text-left px-2.5 py-2 rounded-md border-0 bg-transparent cursor-pointer">Rename</button>
    <button type="button" class="block w-full text-left px-2.5 py-2 rounded-md border-0 bg-transparent cursor-pointer">Duplicate</button>
    <button type="button" class="block w-full text-left px-2.5 py-2 rounded-md border-0 bg-transparent cursor-pointer" style="color:#b3261e">Delete</button>
  </div>
  
  <p class="mt-2.5 text-xs text-[#241430aa]">right-click (or long-press on touch) opens the context menu{{unless open}}rest state

react

import { useState } from "react";

export function RightClickMenu({
  itemLabel = "budget-2026.xlsx",
  open: initialOpen = true,
  accent = "#D9C8F0",
}) {
  const [open, setOpen] = useState(initialOpen);
  const rowStyle = { display: "block", width: "100%", boxSizing: "border-box", textAlign: "left", padding: "8px 10px", border: "none", background: "transparent", borderRadius: 6, cursor: "pointer" };
  return (
    <div style={{ width: 260, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", position: "relative" }}>
      <div onContextMenu={(e) => { e.preventDefault(); setOpen(true); }} style={{ padding: "10px 12px", borderRadius: 8, background: "#24143010", width: "fit-content" }}>&#128196; {itemLabel}</div>
      {open && (
        <div style={{ position: "relative", marginTop: 8, width: 160, borderRadius: 10, background: "#FAF7F2", boxShadow: "0 12px 26px rgba(36,20,48,.2)", border: "1.5px solid #24143014", padding: 6 }}>
          <div style={{ position: "absolute", top: -14, left: -6, fontSize: 16, color: accent }}>&#8598;</div>
          <button type="button" style={rowStyle}>Rename</button>
          <button type="button" style={rowStyle}>Duplicate</button>
          <button type="button" style={{ ...rowStyle, color: "#b3261e" }}>Delete</button>
        </div>
      )}
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{open ? "right-click (or long-press on touch) opens the context menu" : "rest state"}</p>
    </div>
  );
}