Examples › Submenus (nested menus)

An item with an items property will render a submenu, available when hovering over the given option.

const showContextMenu = useContextMenu();
// ...
return (
  <Picture
    image={image}
    onContextMenu={showContextMenu([
      {
        icon: <IconCopy size={16} />,
        key: 'copy',
        onClick: () => copyImageToClipboard(src),
      },
      {
        icon: <IconDownload size={16} />,
        key: 'download',
        onClick: () => downloadImage(src),
      },
      {
        key: 'author',
        icon: <IconUser size={16} />,
        items: [
          {
            key: 'open-in-new-tab',
            onClick: () => window.open(`http://unsplash.com/@${image.author.profile}`, '_blank'),
          },
          {
            key: 'open-in-new-window',
            onClick: () => window.open(`http://unsplash.com/@${image.author.profile}`, '_blank'),
          },
          {
            key: 'another-item',
            onClick: () => console.log('another item clicked'),
          },
        ],
      },
    ])}
  />
);

Right-click on the image below to trigger the context menu:

Picture by Lloyd Henneman

Nesting support

You can nest as many submenus as you want. Don’t abuse this feature, though, as it might be confusing for the user.

const showContextMenu = useContextMenu();
// ...
return (
  <Picture
    image={image}
    onContextMenu={showContextMenu([
      {
        icon: <IconCopy size={16} />,
        key: 'copy',
        onClick: () => copyImageToClipboard(src),
      },
      {
        icon: <IconDownload size={16} />,
        key: 'download',
        onClick: () => downloadImage(src),
      },
      {
        key: 'author',
        icon: <IconUser size={16} />,
        items: [
          {
            key: 'open-in-new-tab',
            onClick: () => window.open(`http://unsplash.com/@${image.author.profile}`, '_blank'),
          },
          {
            key: 'open-in-new-window',
            onClick: () => window.open(`http://unsplash.com/@${image.author.profile}`, '_blank'),
          },
          {
            key: 'nested-items',
            items: [
              {
                key: 'nested-item-1',
                onClick: () => console.log('nested item 1 clicked'),
              },
              {
                key: 'nested-item-2',
                onClick: () => console.log('nested item 2 clicked'),
              },
              {
                key: 'deeply-nested-items',
                items: [
                  {
                    key: 'deeply-nested-item-1',
                    onClick: () => console.log('deeply nested item 1 clicked'),
                  },
                  {
                    key: 'deeply-nested-item-2',
                    onClick: () => console.log('deeply nested item 2 clicked'),
                  },
                ],
              },
            ],
          },
        ],
      },
    ])}
  />
);