diff --git a/src/components/HamburgerMenu.js b/src/components/HamburgerMenu.js
new file mode 100644
index 000000000..0078169ab
--- /dev/null
+++ b/src/components/HamburgerMenu.js
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import './HamburgerMenu.scss';
+
+const HamburgerMenu = ({ onClick }) => {
+  const [open, updateOpen] = useState(false);
+
+  return (
+    <button
+      aria-expanded={open}
+      aria-label="Mobile Menu"
+      className={cx('HamburgerMenu', { HamburgerMenu__open: open })}
+      onClick={() => {
+        updateOpen(!open);
+        onClick();
+      }}
+    >
+      <div />
+      <div />
+      <div />
+    </button>
+  );
+};
+
+HamburgerMenu.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default HamburgerMenu;
diff --git a/src/components/HamburgerMenu.scss b/src/components/HamburgerMenu.scss
new file mode 100644
index 000000000..2da7714fe
--- /dev/null
+++ b/src/components/HamburgerMenu.scss
@@ -0,0 +1,29 @@
+button.HamburgerMenu {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  width: 3rem;
+
+  div {
+    width: 100%;
+    height: 4px;
+    background-color: var(--color-black);
+    margin: 5px 0;
+    border-radius: 2px;
+    transition: 0.18s;
+  }
+
+  &.HamburgerMenu__open {
+    :nth-child(1) {
+      transform: rotate(-45deg) translate(-6px, 6px);
+    }
+
+    :nth-child(2) {
+      opacity: 0;
+    }
+
+    :nth-child(3) {
+      transform: rotate(45deg) translate(-6px, -6px);
+    }
+  }
+}