ComponentsBeta

ContextMenu

Displays a menu located at the pointer, triggered by a right-click or a long-press.

Right click here.

/* eslint-disable no-console */
import React from 'react';
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContentColors,
} from '@minddrop/ui';

export const ContextMenuDemo = () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <ContextMenu>
      <ContextMenuTrigger>
        <div
          style={{
            border: '2px dashed white',
            borderRadius: 4,
            userSelect: 'none',
            padding: '45px 0',
            width: 300,
            textAlign: 'center',
            color: 'white',
          }}
        >
          Right click here.
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent
        style={{ width: 240 }}
        content={[
          {
            type: 'menu-item',
            label: 'Add title',
            icon: 'title',
            onSelect: () => console.log('Add title'),
            keyboardShortcut: ['Ctrl', 'T'],
          },
          {
            type: 'menu-item',
            label: 'Add note',
            icon: 'note',
            onSelect: () => console.log('Add note'),
            keyboardShortcut: ['Ctrl', 'Shift', 'N'],
          },
          {
            type: 'menu-item',
            label: 'Color',
            icon: 'color-palette',
            submenuContentClass: 'color-selection-submenu',
            submenu: ContentColors.map((color) => ({
              type: 'menu-color-selection-item',
              color: color.value,
              onSelect: () => console.log(color.value),
            })),
          },
          {
            type: 'menu-item',
            label: 'Turn into',
            icon: 'turn-into',
            submenu: [
              {
                type: 'menu-item',
                label: 'Text',
                onSelect: () => console.log('Turn into text'),
              },
              {
                type: 'menu-item',
                label: 'Image',
                onSelect: () => console.log('Turn into image'),
              },
              {
                type: 'menu-item',
                label: 'Equation',
                onSelect: () => console.log('Turn into equation'),
              },
            ],
          },
          {
            type: 'menu-separator',
          },
          {
            type: 'menu-label',
            label: 'Actions',
          },
          {
            type: 'menu-item',
            label: 'Copy link',
            icon: 'link',
            onSelect: () => console.log('Copy link'),
            keyboardShortcut: ['Ctrl', 'Shift', 'C'],
            tooltipTitle: 'Copy drop link',
            tooltipDescription:
              'Paste the link into other drops to create a network or related information.',
          },
          {
            type: 'menu-item',
            label: 'Move to',
            icon: 'arrow-up-right',
            onSelect: () => console.log('Move to'),
            submenuContentClass: 'topic-selection-submenu',
            submenu: [
              {
                type: 'menu-topic-selection-item',
                label: 'Sailing',
                onSelect: () => console.log("Move to 'Sailing'"),
                subtopics: [
                  {
                    type: 'menu-topic-selection-item',
                    label: 'Navigation',
                    onSelect: () => console.log("Move to 'Navigation'"),
                    subtopics: [
                      {
                        type: 'menu-topic-selection-item',
                        label: 'Coastal navigation',
                        onSelect: () =>
                          console.log("Move to 'Coastal navigation'"),
                        subtopics: [],
                      },
                      {
                        type: 'menu-topic-selection-item',
                        label: 'Offshore navigation',
                        onSelect: () =>
                          console.log("Move to 'Offshore navigation'"),
                        subtopics: [],
                      },
                    ],
                  },
                  {
                    type: 'menu-topic-selection-item',
                    id: 'anchoring',
                    label: 'Anchoring',
                    onSelect: () => console.log("Move to 'Anchoring'"),
                    subtopics: [],
                  },
                  {
                    type: 'menu-topic-selection-item',
                    label: 'Sailboats',
                    onSelect: () => console.log("Move to 'Sailboats'"),
                    subtopics: [],
                  },
                ],
              },
              {
                type: 'menu-topic-selection-item',
                label: 'Home',
                onSelect: () => console.log("Move to 'Home'"),
                subtopics: [],
              },
              {
                type: 'menu-topic-selection-item',
                label: 'Tea',
                onSelect: () => console.log("Move to 'Tea'"),
                subtopics: [],
              },
              {
                type: 'menu-topic-selection-item',
                label: 'Work',
                onSelect: () => console.log("Move to 'work'"),
                subtopics: [],
              },
              {
                type: 'menu-topic-selection-item',
                label: 'Japanese',
                onSelect: () => console.log("Move to 'Japanese'"),
                subtopics: [],
              },
            ],
          },
          {
            type: 'menu-item',
            label: 'Delete',
            icon: 'trash',
            onSelect: () => console.log('Delete'),
            keyboardShortcut: ['Del'],
            secondaryLabel: 'Delete everywhere',
            secondaryOnSelect: () => console.log('Delete everywhere'),
            tooltipTitle: 'Delete drop',
            tooltipDescription: 'Shift + Click to delete from all topics',
          },
        ]}
      />
    </ContextMenu>
  </div>
);

export default ContextMenuDemo;

Features

Can be generated from an array of item config objects.
Supports submenus with configurable reading direction.
Supports items, labels, separators.
Supports modal and non-modal modes.
Customize side, alignment, offsets, collision handling.
Focus is fully managed.
Full keyboard navigation.
Typeahead support.
Secondary action support when holidng Shift key
Triggers with a long-press on touch devices

Usage

You can compose a menu using the available components.

import {
  IconButton,
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuItem,
  ContextMenuTriggerItem,
  ContextMenuTopicSelectionItem,
  ContextMenuColorSelectionItem,
  ContentColors,
} from '@minddrop/ui';

export default () => {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <Drop />
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem
          label="Add title"
          icon="title"
          keyboardShortcut={['Ctrl', 'T']}
          onSelect={() => console.log('Add title')}
        />
        <ContextMenuItem
          label="Add note"
          icon="note"
          keyboardShortcut={['Ctrl', 'Shift', 'N']}
          onSelect={() => console.log('Add note')}
        />
        <ContextMenu>
          <ContextMenuTriggerItem
            label="Color"
            icon="color-palette"
          />
          <ContextMenuContent className="color-selection-submenu">
            {ContentColors.map((color) => (
              <ContextMenuColorSelectionItem
                key={color.value}
                color={color.value}
                onSelect={() => console.log(color.value)}
              />
            ))}
          </ContextMenuContent>
        </ContextMenu>
        <ContextMenu>
          <ContextMenuTriggerItem
            label="Turn into"
            icon="turn-into"
          />
          <ContextMenuContent>
            <ContextMenuItem
              label="Text"
              onSelect={() => console.log('Turn into text')}
            />
            <ContextMenuItem
              label="Image"
              onSelect={() => console.log('Turn into image')}
            />
            <ContextMenuItem
              label="Equation"
              onSelect={() => console.log('Turn into equation')}
            />
          </ContextMenuContent>
        </ContextMenu>
        <ContextMenuSeparator />
        <ContextMenuLabel>Actions</ContextMenuLabel>
        <ContextMenuItem
          label="Copy link"
          icon="link"
          keyboardShortcut={['Ctrl', 'Shift', 'C']}
          onSelect={() => console.log('Copy link')}
          tooltipTitle="Copy drop link"
          tooltipDescription="Paste the link into other drops to create a network or related information."
        />
        <ContextMenu>
          <ContextMenuTriggerItem
            label="Move to"
            icon="arrow-up-right"
          />
          <ContextMenuContent className="topic-selection-submenu">
            <ContextMenuTopicSelectionItem
              label="Sailing"
              onSelect={() => console.log("Move to 'Sailing'")}
            >
              <ContextMenuTopicSelectionItem
                label="Navigation"
                onSelect={() => console.log("Move to 'Navigation'")}
              >
                // ...
              </ContextMenuTopicSelectionItem>
              // ...
            </ContextMenuTopicSelectionItem>
            // ...
          </ContextMenuContent>
        </ContextMenu>
        <ContextMenuItem
          label="Delete"
          icon="trash"
          keyboardShortcut={['Del']}
          onSelect={() => console.log('Delete')}
          tooltipTitle="Delete drop"
          tooltipDescription="Shift + Click to delete from all topics"
        />
      </ContextMenuContent>
    </ContextMenu>
  );
};

Context menus can also be generated by passing an array of item configs as the ContextMenuContent's content prop. The generated menu below is equivalent to the composed example above.

See the menu component configs section for details on the different configuration objects.

import {
  IconButton,
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  MenuContent,
  ContentColors,
} from '@minddrop/ui';

const menu: MenuContent = [
  {
    type: 'menu-item',
    label: 'Add title',
    icon: 'title',
    onSelect: () => console.log('Add title'),
    keyboardShortcut: ['Ctrl', 'T'],
  },
  {
    type: 'menu-item',
    label: 'Add note',
    icon: 'note',
    onSelect: () => console.log('Add note'),
    keyboardShortcut: ['Ctrl', 'Shift', 'N'],
  },
  {
    type: 'menu-item',
    label: 'Color',
    icon: 'color-palette',
    submenuContentClass: 'color-selection-submenu',
    submenu: ContentColors.map((color) => ({
      type: 'menu-color-selection-item',
      color: color.value,
      onSelect: () => console.log(color.value),
    })),
  },
  {
    type: 'menu-item',
    label: 'Turn into',
    icon: 'turn-into',
    submenu: [
      {
        type: 'menu-item',
        label: 'Text',
        onSelect: () => console.log('Turn into text'),
      },
      {
        type: 'menu-item',
        label: 'Image',
        onSelect: () => console.log('Turn into image'),
      },
      {
        type: 'menu-item',
        label: 'Equation',
        onSelect: () => console.log('Turn into equation'),
      },
    ],
  },
  {
    type: 'menu-separator',
  },
  {
    type: 'menu-label',
    label: 'Actions',
  },
  {
    type: 'menu-item',
    label: 'Copy link',
    icon: 'link',
    onSelect: () => console.log('Copy link'),
    keyboardShortcut: ['Ctrl', 'Shift', 'C'],
    tooltipTitle: 'Copy drop link',
    tooltipDescription:
      'Paste the link into other drops to create a network or related information.',
  },
  {
    type: 'menu-item',
    label: 'Move to',
    icon: 'arrow-up-right',
    submenuContentClass: 'topic-selection-submenu',
    onSelect: () => console.log('Move to'),
    submenu: [
      {
        id: 'sailing',
        label: 'Sailing',
        onSelect: () => console.log("Move to 'Sailing'"),
        subtopics: [
          {
            id: 'navigation',
            label: 'Navigation',
            onSelect: () => console.log("Move to 'Navigation'"),
            subtopics: [
              // ...
            ],
          },
          // ...
        ],
      },
      // ...
    ],
  },
  {
    type: 'menu-item',
    label: 'Delete',
    icon: 'trash',
    onSelect: () => console.log('Delete'),
    keyboardShortcut: ['Del'],
    secondaryLabel: 'Delete everywhere',
    secondaryOnSelect: () => console.log('Delete everywhere'),
    tooltipTitle: 'Delete drop',
    tooltipDescription: 'Shift + Click to delete from all topics',
  },
];

export default () => {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <IconButton icon="more-vertical" label="Drop options" />
      </ContextMenuTrigger>
      <ContextMenuContent content={menu} />
    </ContextMenu>
  );
};

Component API Reference

ContextMenu

Contains all the parts of a context menu.

Prop	Type	Default
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`modal`	`boolean`	`true`
`dir`	`enum`	`"ltr"`
`id`	`string`	No default value

ContextMenuTrigger

The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking (or using the relevant keyboard shortcuts).

Prop	Type	Default
`asChild`	`boolean`	`true`

ContextMenuContent

The component that pops out in an open context menu.

Prop	Type	Default
`children`	`node`	No default value
`content`	`array`	No default value
`allowPinchZoom`	`boolean`	`false`
`loop`	`boolean`	`false`
`onCloseAutoFocus`	`function`	No default value
`onEscapeKeyDown`	`function`	No default value
`onPointerDownOutside`	`function`	No default value
`onFocusOutside`	`function`	No default value
`onInteractOutside`	`function`	No default value
`portalled`	`boolean`	`true`
`forceMount`	`boolean`	No default value
`side`	`enum`	`"bottom"`
`sideOffset`	`number`	`0`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionTolerance`	`number`	`0`

ContextMenuItem

An item in the menu. Items can be selected using the mouse or keyboard. Items can be given a secondary action which is enabled when the Shift key is held down.

Prop	Type	Default
`label*`	`node`	No default value
`onSelect*`	`function`	No default value
`icon`	`IconName \| ReactElement`	No default value
`keyboardShortcut`	`string[]`	No default value
`secondaryLabel`	`node`	No default value
`secondaryOnSelect`	`function`	No default value
`secondaryIcon`	`IconName \| ReactElement`	No default value
`secondaryKeyboardShortcut`	`string[]`	No default value
`tooltipTitle`	`node`	No default value
`tooltipDescription`	`node`	No default value
`disabled`	`boolean`	No default value
`textValue`	`string`	No default value

ContextMenuTriggerItem

An item that opens a submenu. Used in combination with a nested ContextMenu. Must be rendered inside a root ContextMenu. Has the same props API as a regular ContextMenuItem.

Prop	Type	Default
`label*`	`node`	No default value
`onSelect`	`function`	No default value
`icon`	`IconName \| ReactElement`	No default value
`keyboardShortcut`	`string[]`	No default value
`tooltipTitle`	`node`	No default value
`tooltipDescription`	`node`	No default value
`disabled`	`boolean`	No default value
`textValue`	`string`	No default value

ContextMenuTopicSelectionItem

A menu item designed for selecting a topic. Can be expanded to reveal subtopics.

Prop	Type	Default
`label*`	`string`	No default value
`onSelect`	`function`	No default value
`children`	`React.ComponentType<ContextMenuTopicSelectionItemProps>`	No default value

ContextMenuColorSelectionItem

A menu item designed for selecting a ContentColor.

Prop	Type	Default
`color*`	`ContentColor`	No default value
`onSelect`	`function`	No default value

ContextMenuLabel

Used to render a label. It won't be focusable using arrow keys.

Prop	Type	Default
`children*`	`node`	No default value

ContextMenuSeparator

Used to visually separate items in the context menu. Does not take any props.

Context menus can also be generated by passing an array of menu component configuration objects and React components as the ContextMenuContent's content prop.

MenuLabelConfig

To create a menu label, add a MenuLabelConfig config object to the menu array.

const menu = [
  // ...
  {
    type: 'menu-label',
    label: 'Actions',
  },
  // ...
];

Prop	Type	Default
`type*`	`menu-label`	No default value
`label*`	`string`	No default value

MenuSeparatorConfig

To create a horizontal separator, add a MenuSeparatorConfig object to the menu array.

const menu = [
  // ...
  {
    type: 'menu-separator',
  },
  // ...
];

Prop	Type	Default
`type*`	`menu-separator`	No default value

MenuItemConfig

To create a menu item, add a MenuItemConfig object to the menu array.

const menu = [
  // ...
  {
    type: 'menu-item',
    label: 'Copy link',
    icon: 'link',
    onSelect: () => console.log('Copy link'),
    keyboardShortcut: ['Ctrl', 'Shift', 'C'],
    tooltipTitle: 'Copy drop link',
    tooltipDescription:
      'Paste the link into other drops to create a network or related information.',
  },
  // With submenu
  {
    type: 'menu-item',
    label: 'Turn into',
    icon: 'turn-into',
    submenu: [
      {
        type: 'menu-item',
        label: 'Text',
        onSelect: () => console.log('Turn into text'),
      },
      {
        type: 'menu-item',
        label: 'Image',
        onSelect: () => console.log('Turn into image'),
      },
      {
        type: 'menu-item',
        label: 'Equation',
        onSelect: () => console.log('Turn into equation'),
      },
    ],
  },
  // With secondary action
  {
    type: 'menu-item',
    label: 'Delete',
    icon: 'trash',
    onSelect: () => console.log('Delete'),
    keyboardShortcut: ['Del'],
    secondaryLabel: 'Delete everywhere',
    secondaryOnSelect: () => console.log('Delete everywhere'),
    tooltipTitle: 'Delete drop',
    tooltipDescription: 'Shift + Click to delete from all topics',
  },
  // ...
];

Prop	Type	Default
`type*`	`menu-item`	No default value
`label*`	`node`	No default value
`icon`	`IconName \| ReactElement`	No default value
`onSelect*`	`function`	No default value
`keyboardShortcut`	`string[]`	No default value
`secondaryLabel`	`node`	No default value
`secondaryOnSelect`	`function`	No default value
`secondaryIcon`	`IconName \| ReactElement`	No default value
`secondaryKeyboardShortcut`	`string[]`	No default value
`tooltipTitle`	`node`	No default value
`tooltipDescription`	`node`	No default value
`submenu`	`array`	No default value
`disabled`	`boolean`	No default value

MenuTopicSelectionItemConfig

To create a topic selection menu item, add a MenuTopicSelectionItemConfig object to the menu array.

const menu = [
  // ...
  {
    type: 'menu-topic-selection-item',
    label: 'Sailing',
    onSelect: () => console.log("Move to 'Sailing'"),
    subtopics: [
      {
        type: 'menu-topic-selection-item',
        label: 'Sailing',
        onSelect: () => console.log("Move to 'Sailing'"),
        subtopics: [],
      },
    ],
  },
  // ...
];

Prop	Type	Default
`type*`	`menu-topic-selection-item`	No default value
`title*`	`string`	No default value
`id*`	`string`	No default value
`subtopics*`	`TopicSelectionItem[]`	No default value
`onSelect`	`function`	No default value

MenuColorSelectionItemConfig

To create a color selection menu item, add a MenuColorSelectionItemConfig object to the menu array.

const menu = [
  // ...
  {
    type: 'menu-color-selection-item',
    color: 'green',
    onSelect: () => console.log('green'),
  },
  // ...
];

Prop	Type	Default
`type*`	`menu-color-selection-item`	No default value
`color*`	`ContentColor`	No default value
`onSelect`	`function`	No default value

Radix exposes a CSS custom property --radix-context-menu-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.context-menu {
  transform-origin: var(
    --radix-context-menu-content-transform-origin
  );
  animation: scaleIn 0.5s ease-out;
}

Collision-aware animations

Radix exposes data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(-10px);
  }
}

.context-menu {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.context-menu[data-side='bottom'] {
  animation: slideDown;
}

.context-menu[data-side='top'] {
  animation: slideUp;
}

Accessibility

Adheres to the Menu WAI-ARIA design pattern and uses roving tabindex to manage focus movement among menu items.

Keyboard Interactions

Key	Description
`Space`	Activates the focused item.
`Enter`	Activates the focused item.
`ArrowDown`	Moves focus to the next item.
`ArrowUp`	Moves focus to the previous item.
`ArrowRightArrowLeft`	When focus is on `DropdownMenuTriggerItem`, opens or closes the submenu depending on reading direction. When focus is on `DropdownMenuTopicSelectionItem`, expands or collapses the topic's subtopics.
`Esc`	Closes the context menu

Collapsible

Dialog

Edit this page on GitHub.

Overview

Components

Utilities

ContextMenu

Features

Usage

Composing a menu

Generating a menu

Component API Reference

ContextMenu

ContextMenuTrigger

ContextMenuContent

ContextMenuItem

ContextMenuTriggerItem

ContextMenuTopicSelectionItem

ContextMenuColorSelectionItem

ContextMenuLabel

ContextMenuSeparator

Menu component configs

MenuLabelConfig

MenuSeparatorConfig

MenuItemConfig

MenuTopicSelectionItemConfig

MenuColorSelectionItemConfig

Styling

Origin-aware animations

Collision-aware animations

Accessibility

Keyboard Interactions