Examples › Action dividers

An item without an onClick handler or an items property will be rendered as a divider, like so:

const showContextMenu = useContextMenu();

const [flipVertical, setFlipVertical] = useState(false);
const [flipHorizontal, setFlipHorizontal] = useState(false);
// ...
return (
  <Picture
    image={image}
    flipVertical={flipVertical}
    flipHorizontal={flipHorizontal}
    onContextMenu={showContextMenu([
      {
        key: 'copy',
        icon: <IconCopy size={16} />,
        onClick: () => copyImageToClipboard(src),
      },
      {
        key: 'download',
        icon: <IconDownload size={16} />,
        onClick: () => downloadImage(src),
      },
      { key: 'divider' },
      {
        key: 'flipVertical',
        icon: <IconFlipVertical size={16} />,
        onClick: () => setFlipVertical((v) => !v),
      },
      {
        key: 'flipHorizontal',
        icon: <IconFlipHorizontal size={16} />,
        onClick: () => setFlipHorizontal((v) => !v),
      },
    ])}
  />
);