diff --git a/package.json b/package.json
index 42908e12e..b4d47d335 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
"postcss-simple-vars": "^4.0.0",
"prop-types": "^15.5.10",
"react": "15.5.4",
+ "react-contextmenu": "2.6.5",
"react-dom": "15.5.4",
"react-draggable": "2.2.6",
"react-intl": "2.3.0",
diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css
new file mode 100644
index 000000000..d74dc3720
--- /dev/null
+++ b/src/components/context-menu/context-menu.css
@@ -0,0 +1,29 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.context-menu {
+ min-width: 130px;
+ padding: 5px 0; /* The white strip at the top and bottom of the menu */
+ margin: 2px 0 0; /* To keep the menu below the cursor comfortably */
+ font-size: 0.85rem;
+ text-align: left;
+ background-color: #fff;
+ border: 1px solid $ui-pane-border;
+ border-radius: calc($space / 2);
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+ pointer-events: none;
+ transition: opacity 0.2s ease;
+ z-index: 100;
+}
+
+.menu-item {
+ padding: 8px 12px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: 0.1s ease;
+}
+
+.menu-item:hover {
+ background: $motion-primary;
+ color: white;
+}
diff --git a/src/components/context-menu/context-menu.jsx b/src/components/context-menu/context-menu.jsx
new file mode 100644
index 000000000..7d33fe641
--- /dev/null
+++ b/src/components/context-menu/context-menu.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {ContextMenu, MenuItem} from 'react-contextmenu';
+
+import styles from './context-menu.css';
+
+const StyledContextMenu = props => (
+
+);
+
+const StyledMenuItem = props => (
+
+);
+
+export {
+ StyledContextMenu as ContextMenu,
+ StyledMenuItem as MenuItem
+};
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index d1be3c3dc..37e802171 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -2,21 +2,25 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
-import Box from '../box/box.jsx';
import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
import CloseButton from '../close-button/close-button.jsx';
import styles from './sprite-selector-item.css';
+import {ContextMenuTrigger} from 'react-contextmenu';
+import {ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
+import {FormattedMessage} from 'react-intl';
+
+// react-contextmenu requires unique id to match trigger and context menu
+let contextMenuId = 0;
const SpriteSelectorItem = props => (
-
+
+
);
SpriteSelectorItem.propTypes = {