Контекстное меню

ContextMenu открывается по клику правой кнопкой мыши (или клавишей контекстного меню на клавиатуре) у позиции курсора и поддерживает обычные пункты, пункты-чекбоксы с индикатором отметки, декоративные подсказки горячих клавиш, деструктивные пункты и вложенные подменю любой глубины, которые открываются при наведении (с небольшой задержкой) или клавишей ArrowRight. Каждый уровень рендерится в портал, позиционируется с учётом границ экрана, анимируется пружиной с поддержкой уменьшенного движения и закрывается по Escape (сначала самый глубокий открытый уровень), клику вне меню или Tab — с возвратом фокуса туда, где он был до открытия.

Пример

Интерактивный пример

Кликните правой кнопкой мыши

Использование

Импортируйте компонент из публичной точки входа пакета.

import { ContextMenu, type ContextMenuEntry } from "denjs-ui";

const items = [
  { id: "copy", label: "Copy" },
  { id: "paste", label: "Paste", disabled: true },
  { type: "separator" as const, id: "separator" },
  {
    id: "more",
    type: "submenu" as const,
    label: "More actions",
    items: [
      { id: "duplicate", label: "Duplicate" },
      { id: "archive", label: "Archive" },
    ],
  },
  { type: "separator" as const, id: "danger-separator" },
  { id: "delete", label: "Delete", tone: "danger" as const },
] satisfies readonly ContextMenuEntry[];

export function Example() {
  return (
    <ContextMenu items={items}>
      <div className="rounded-lg border border-dashed border-border p-8 text-center text-sm text-mutedForeground">
        Right-click here
      </div>
    </ContextMenu>
  );
}