diff --git a/src/components/overflow-menu/overflow-icon.svg b/src/components/overflow-menu/overflow-icon.svg
new file mode 100644
index 000000000..ffd39c400
--- /dev/null
+++ b/src/components/overflow-menu/overflow-icon.svg
@@ -0,0 +1,9 @@
+<svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4923 14.0441C11.4621 14.0441 12.2482 14.7672 12.2482 15.659C12.2482 16.5509 11.4621 17.2739 10.4923 17.2739C9.52252 17.2739 8.73636 16.5509 8.73636 15.659C8.73636 14.7672 9.52252 14.0441 10.4923 14.0441ZM10.4923 7.58453C11.4621 7.58453 12.2482 8.30755 12.2482 9.19943C12.2482 10.0913 11.4621 10.8143 10.4923 10.8143C9.52252 10.8143 8.73636 10.0913 8.73636 9.19943C8.73636 8.30755 9.52252 7.58453 10.4923 7.58453ZM12.2482 2.73983C12.2482 1.84795 11.4621 1.12493 10.4923 1.12493C9.52252 1.12493 8.73636 1.84795 8.73636 2.73983C8.73636 3.63172 9.52252 4.35474 10.4923 4.35474C11.4621 4.35474 12.2482 3.63172 12.2482 2.73983Z" fill="#575E75" fill-opacity="0.6"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="1" width="5" height="17">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4923 14.0441C11.4621 14.0441 12.2482 14.7672 12.2482 15.659C12.2482 16.5509 11.4621 17.2739 10.4923 17.2739C9.52252 17.2739 8.73636 16.5509 8.73636 15.659C8.73636 14.7672 9.52252 14.0441 10.4923 14.0441ZM10.4923 7.58453C11.4621 7.58453 12.2482 8.30755 12.2482 9.19943C12.2482 10.0913 11.4621 10.8143 10.4923 10.8143C9.52252 10.8143 8.73636 10.0913 8.73636 9.19943C8.73636 8.30755 9.52252 7.58453 10.4923 7.58453ZM12.2482 2.73983C12.2482 1.84795 11.4621 1.12493 10.4923 1.12493C9.52252 1.12493 8.73636 1.84795 8.73636 2.73983C8.73636 3.63172 9.52252 4.35474 10.4923 4.35474C11.4621 4.35474 12.2482 3.63172 12.2482 2.73983Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="0.93222" y="18.1711" width="17.9433" height="19.5104" transform="rotate(-90 0.93222 18.1711)" fill="#575E75" fill-opacity="0.6"/>
+</g>
+</svg>
diff --git a/src/components/overflow-menu/overflow-menu.jsx b/src/components/overflow-menu/overflow-menu.jsx
new file mode 100644
index 000000000..af815ca1e
--- /dev/null
+++ b/src/components/overflow-menu/overflow-menu.jsx
@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Dropdown from '../dropdown/dropdown.jsx';
+import overflowIcon from './overflow-icon.svg';
+
+import './overflow-menu.scss';
+
+const OverflowMenu = ({children, dropdownAs, className}) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <div className={classNames('overflow-menu-container', className)}>
+            <button
+                className="overflow-menu-trigger ignore-react-onclickoutside"
+                onClick={() => setOpen(!open)}
+            >
+                <img src={overflowIcon} />
+            </button>
+            {open && <Dropdown
+                isOpen
+                as={dropdownAs}
+                className="overflow-menu-dropdown"
+                onRequestClose={() => setOpen(false)}
+            >
+                {children}
+            </Dropdown>}
+        </div>
+    );
+};
+
+OverflowMenu.propTypes = {
+    children: PropTypes.node,
+    dropdownAs: PropTypes.string,
+    className: PropTypes.string
+};
+
+OverflowMenu.defaultProps = {
+    dropdownAs: 'ul'
+};
+
+export default OverflowMenu;
diff --git a/src/components/overflow-menu/overflow-menu.scss b/src/components/overflow-menu/overflow-menu.scss
new file mode 100644
index 000000000..124c96520
--- /dev/null
+++ b/src/components/overflow-menu/overflow-menu.scss
@@ -0,0 +1,50 @@
+
+.overflow-menu-container {
+    display: flex;
+    position: relative;
+
+    .overflow-menu-trigger {
+        background: transparent;
+        border: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .overflow-menu-dropdown {
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        box-sizing: border-box;
+        box-shadow: 0px 2px 8px rgba(87, 94, 117, 0.5);
+        border-radius: 8px;
+        padding: 0;
+        margin: 30px 0 0 0;
+        right: unset; /* default dropdown aligns right edges, but we want left edges */
+        left: 0;
+        z-index: 1;
+
+        /* Include default styling for <li><button />... list */
+        li {
+            margin: 0;
+            padding: 0;
+            & + li {
+                border-top: 1px solid rgba(0, 0, 0, 0.15);
+            }
+            button { 
+                display: flex;
+                align-items: center;
+                color: white;
+                font-weight: bold;
+                padding: 5px 10px;
+                background: none;
+                border: none;
+                width: 100%;
+                text-align: left;
+                &:hover {
+                    background-color: rgba(0, 0, 0, 0.1);
+                }
+                & > img {
+                    margin: 0 10px 0 0;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx
index 7b854100b..9fd180fc0 100644
--- a/src/views/components/components.jsx
+++ b/src/views/components/components.jsx
@@ -12,12 +12,31 @@ const Grid = require('../../components/grid/grid.jsx');
 const TextArea = require('../../components/forms/textarea.jsx');
 const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
 const Select = require('../../components/forms/select.jsx');
+const OverflowMenu = require('../../components/overflow-menu/overflow-menu.jsx').default;
+const exampleIcon = require('./example-icon.svg');
 
 require('./components.scss');
 
 const Components = () => (
     <div className="components">
         <div className="inner">
+            <h1>Overflow Menu</h1>
+            <div className="example-tile">
+                <OverflowMenu>
+                    <li>
+                        <button>
+                            <img src={exampleIcon} />
+                            Remove
+                        </button>
+                    </li>
+                    <li>
+                        <button>
+                            <img src={exampleIcon} />
+                            Upgrade!
+                        </button>
+                    </li>
+                </OverflowMenu>
+            </div>
             <h1>Nav Bubbles</h1>
             <div className="subnavigation">
                 <SubNavigation>
diff --git a/src/views/components/components.scss b/src/views/components/components.scss
index 1c2ac9e02..b4a272f95 100644
--- a/src/views/components/components.scss
+++ b/src/views/components/components.scss
@@ -18,6 +18,17 @@
         width: 200px;
     }
 
+    .example-tile {
+        width: 200px;
+        height: 50px;
+        border: 1px solid $ui-border;
+        border-radius: 8px;
+        padding: 10px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center
+    }
+
     .colors {
         span {
             display: inline-block;
diff --git a/src/views/components/example-icon.svg b/src/views/components/example-icon.svg
new file mode 100644
index 000000000..3edd347dd
--- /dev/null
+++ b/src/views/components/example-icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>Sound/General/Delete</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.54751641,6.99994966 L15.4523042,6.99994966 C15.7284466,6.99994966 15.9523042,7.22380729 15.9523042,7.49994966 C15.9523042,7.51506367 15.9516189,7.5301699 15.9502504,7.54522183 L15.1651793,16.1801783 C15.0715275,17.2102489 14.207924,17.9989808 13.1736049,17.9990897 L6.82662224,17.9997575 C5.79213514,17.9998663 4.92828345,17.2110677 4.83462539,16.180829 L4.04956981,7.54521753 C4.02456905,7.27020922 4.22724022,7.02700381 4.50224854,7.00200306 C4.51729904,7.00063483 4.53240384,6.99994966 4.54751641,6.99994966 Z M7.33333333,4 L7.88603796,2.34188612 C7.95409498,2.13771505 8.14516441,2 8.36037961,2 L11.6396204,2 C11.8548356,2 12.045905,2.13771505 12.113962,2.34188612 L12.6666667,4 L16.5,4 C16.7761424,4 17,4.22385763 17,4.5 L17,5.5 C17,5.77614237 16.7761424,6 16.5,6 L3.5,6 C3.22385763,6 3,5.77614237 3,5.5 L3,4.5 C3,4.22385763 3.22385763,4 3.5,4 L7.33333333,4 Z M8.38742589,4 L11.6125741,4 L11.2792408,3 L8.72075922,3 L8.38742589,4 Z M10,11.7204812 L11.5952436,10.1252376 C11.7905057,9.92997548 12.1070882,9.92997548 12.3023504,10.1252376 L12.3747624,10.1976496 C12.5700245,10.3929118 12.5700245,10.7094943 12.3747624,10.9047564 L10.7795188,12.5 L12.3747624,14.0952436 C12.5700245,14.2905057 12.5700245,14.6070882 12.3747624,14.8023504 L12.3023504,14.8747624 C12.1070882,15.0700245 11.7905057,15.0700245 11.5952436,14.8747624 L10,13.2795188 L8.40475641,14.8747624 C8.20949427,15.0700245 7.89291178,15.0700245 7.69764963,14.8747624 L7.62523762,14.8023504 C7.42997548,14.6070882 7.42997548,14.2905057 7.62523762,14.0952436 L9.22048121,12.5 L7.62523762,10.9047564 C7.42997548,10.7094943 7.42997548,10.3929118 7.62523762,10.1976496 L7.69764963,10.1252376 C7.89291178,9.92997548 8.20949427,9.92997548 8.40475641,10.1252376 L10,11.7204812 Z" id="path-1"></path>
+    </defs>
+    <g id="Sound/General/Delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Trash-Can"></g>
+        <g id="White" mask="url(#mask-2)" fill="#FFFFFF">
+            <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file