Context Menu

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { ContextMenu } from '@krackedui/motion';

export function FileContextMenu() {
  const [pinned, setPinned] = useState(false);
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger className="flex h-28 w-full max-w-72 items-center justify-center rounded-n-lg text-[14px] text-n-text-secondary shadow-[inset_0_0_0_1px_var(--n-border-primary)]">
        Right-click (or long-press) here
      </ContextMenu.Trigger>
      <ContextMenu.Content width={220}>
        <ContextMenu.Item icon="link" shortcut="⌘L">Copy link</ContextMenu.Item>
        <ContextMenu.Item icon="edit">Rename</ContextMenu.Item>
        <ContextMenu.CheckboxItem checked={pinned} onCheckedChange={setPinned}>Pinned</ContextMenu.CheckboxItem>
        <ContextMenu.Separator />
        <ContextMenu.Item icon="trash" destructive>Delete</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  );
}

Examples

Right-click area

Composition

<ContextMenu.Root>
  <ContextMenu.Trigger>…area…</ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item />  <ContextMenu.CheckboxItem />  <ContextMenu.RadioGroup />  <ContextMenu.Sub />
  </ContextMenu.Content>
</ContextMenu.Root>

• Same item parts and props as Menu (Item, CheckboxItem, RadioGroup, RadioItem, ToggleItem, Label, Separator, Group, Sub, SubTrigger, SubContent).

API Reference

ContextMenu.Root

Holds the open state (opened by the pointer, so only onOpenChange).

ContextMenu.Trigger

The area that opens the menu.

ContextMenu.Content

The floating menu, positioned at the pointer.

ContextMenu.Item

An action row.

ContextMenu.CheckboxItem

An on/off option (menuitemcheckbox) with a trailing checkmark when checked.

ContextMenu.RadioGroup

Groups RadioItems; exactly one is selected.

ContextMenu.RadioItem

One option of a RadioGroup (menuitemradio), checkmark when selected.

ContextMenu.ToggleItem

Motion extra: an on/off row drawn with a switch. Keeps the menu open when toggled.

ContextMenu.Sub

Wraps a submenu (SubTrigger + SubContent).

ContextMenu.SubTrigger

Row that opens a submenu (→ or Enter opens, ← closes). Draws the chevron itself.

ContextMenu.SubContent

The submenu surface (portalled).

ContextMenu.Label / Separator / Group

Section label, hairline separator and a grouping wrapper.

ContextMenu.Search / ContextMenu.Footer

Search: filter field for the header slot (its accessible name defaults to the placeholder). Footer: grey metadata lines for the footer slot.

Accessibility

• Follows the WAI-ARIA menu pattern. Opens on right-click, long-press on touch, or the context menu key / Shift+F10 while the trigger area has focus.
• Focus moves into the menu; ↑/↓, Home/End, typeahead, Enter/Space, → / ← for submenus, Escape to close.
• Stays inside the viewport (8px collision padding) and scrolls when it is taller than the space left.
• Opens and closes with the shared motion layer (styles/motion.css); with prefers-reduced-motion: reduce it only fades.

Usage

• Use as a shortcut to actions that are also available elsewhere (a Menu button, a toolbar).
• Don't hide the only way to do something in a context menu: it is invisible until discovered, and harder on touch.
• Keep it short and in the same order as the matching Menu.