ContextMenu

When to useLink to "When to use"

• Shortcuts on an item: a file row, a card, a node in a canvas or tree.

Use something else when:

• the commands have a visible button: Menu. A context menu is hidden, so every command in it must also be reachable another way.
• the commands apply to the whole app: CommandPalette

UsageLink to "Usage"

children is a function: spread the props it receives onto one element, and make that element focusable so keyboard users can open the menu.

import { ContextMenu } from "@arshad-shah/cynosure";

<ContextMenu label="File actions" items={items} onSelect={run}>
  {(props) => (
    <div {...props} tabIndex={0}>
      report.pdf
    </div>
  )}
</ContextMenu>

Items are the same as Menu's: icons, shortcuts, sections (labelled, or separated by lines only), submenus (an item with items; Right arrow, Enter or a click opens one, Left or Escape closes it, and choosing in one closes the whole menu), disabled, danger and checkable items.

Many targetsLink to "Many targets"

For the rows of a list or the tabs of a tab list, use one ContextMenu for all of them: spread targetFor(key) (the render prop's second argument) onto each, with a key such as the row's item. label and items may then be functions of that key, and onSelect and onOpenChange receive it after the value. The menu sits beside the list, not in it, so a list that may hold only its own items (a tablist, a tree) stays valid, and focus returns to the target that opened it. Tabs and Tree host their context menus this way.

<ContextMenu<File>
  label={(file) => `${file.name} actions`}
  items={(file) => commandsFor(file)}
  onSelect={(command, file) => run(command, file)}
>
  {(_, targetFor) => files.map((file) => <li key={file.id} {...targetFor(file)} tabIndex={0}>{file.name}</li>)}
</ContextMenu>

Coloured iconsLink to "Coloured icons"

Because the item type is Menu's, iconTone and iconColor colour an item's icon here as well, with the meaning of Icon's tone and color. Icons without them stay muted, and a disabled item shows its icon muted.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• The target gets aria-keyshortcuts="Shift+F10". Mention the menu in the target's description if it holds commands found nowhere else.
• Near the edges of the window the menu flips to stay on screen.
• With disabled, the browser's own menu shows.
• On touch screens, add -webkit-touch-callout: none and user-select: none to the target so the system callout does not compete with the menu.

ThemingLink to "Theming"

Shares Menu's tokens: --cy-menu-min-width, --cy-menu-max-width, --cy-menu-radius and --cy-menu-row-height.

RelatedLink to "Related"

Menu · CommandPalette · Tree