diff --git a/css/app.css b/css/app.css
index 8b1382bf4ee..89c81ca2199 100644
--- a/css/app.css
+++ b/css/app.css
@@ -327,6 +327,10 @@
   visibility: hidden;
 }
 
+.graphiql-container .toolbar-menu-items.open {
+  visibility: visible;
+}
+
 .graphiql-container .toolbar-select-options {
   left: 0;
   min-width: 100%;
@@ -334,8 +338,7 @@
   visibility: hidden;
 }
 
-.graphiql-container .toolbar-menu:active .toolbar-menu-items,
-.graphiql-container .toolbar-select:active .toolbar-select-options {
+.graphiql-container .toolbar-select-options.open {
   visibility: visible;
 }
 
diff --git a/src/components/ToolbarMenu.js b/src/components/ToolbarMenu.js
index a25f95e3b69..4ea4eef4900 100644
--- a/src/components/ToolbarMenu.js
+++ b/src/components/ToolbarMenu.js
@@ -14,27 +14,69 @@ import React, { PropTypes } from 'react';
  *
  * A menu style button to use within the Toolbar.
  */
-export function ToolbarMenu({ title, label, children }) {
-  return (
-    <a
-      className="toolbar-menu toolbar-button"
-      onMouseDown={preventDefault}
-      title={title}>
-      {label}
-      <svg width="14" height="8">
-        <path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z" />
-      </svg>
-      <ul className="toolbar-menu-items">
-        {children}
-      </ul>
-    </a>
-  );
-}
+export class ToolbarMenu extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    label: PropTypes.string,
+  }
 
-ToolbarMenu.propTypes = {
-  title: PropTypes.string,
-  label: PropTypes.string,
-};
+  constructor(props) {
+    super(props);
+    this.state = { visible: false };
+  }
+
+  componentWillUnmount() {
+    this._release();
+  }
+
+  render() {
+    const visible = this.state.visible;
+    return (
+      <a
+        className="toolbar-menu toolbar-button"
+        onClick={this.handleOpen.bind(this)}
+        onMouseDown={preventDefault}
+        ref={node => {this._node = node;}}
+        title={this.props.title}>
+        {this.props.label}
+        <svg width="14" height="8">
+          <path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z" />
+        </svg>
+        <ul className={'toolbar-menu-items' + (visible ? ' open' : '')}>
+          {this.props.children}
+        </ul>
+      </a>
+    );
+  }
+
+  _subscribe() {
+    if (!this._listener) {
+      this._listener = this.handleClick.bind(this);
+      document.addEventListener('click', this._listener);
+    }
+  }
+
+  _release() {
+    if (this._listener) {
+      document.removeEventListener('click', this._listener);
+      this._listener = null;
+    }
+  }
+
+  handleClick(e) {
+    if (this._node !== e.target) {
+      preventDefault(e);
+      this.setState({ visible: false });
+      this._release();
+    }
+  }
+
+  handleOpen = e => {
+    preventDefault(e);
+    this.setState({ visible: true });
+    this._subscribe();
+  };
+}
 
 export function ToolbarMenuItem({ onSelect, title, label }) {
   return (
diff --git a/src/components/ToolbarSelect.js b/src/components/ToolbarSelect.js
index 7e935cd0012..cc8b7101922 100644
--- a/src/components/ToolbarSelect.js
+++ b/src/components/ToolbarSelect.js
@@ -14,42 +14,88 @@ import React, { PropTypes } from 'react';
  *
  * A select-option style button to use within the Toolbar.
  *
- * Note that, like React's <select>, this component is stateless and expects you
- * to re-render with a new selected={} condition on the child options.
  */
-export function ToolbarSelect({ onSelect, title, children }) {
-  let selectedChild;
-  const optionChildren = React.Children.map(children, (child, i) => {
-    if (!selectedChild || child.props.selected) {
-      selectedChild = child;
-    }
-    const onChildSelect =
+
+export class ToolbarSelect extends React.Component {
+  static propTypes = {
+    title: PropTypes.string,
+    label: PropTypes.string,
+    onSelect: PropTypes.func
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { visible: false };
+  }
+
+  componentWillUnmount() {
+    this._release();
+  }
+
+  render() {
+    let selectedChild;
+    const visible = this.state.visible;
+    const optionChildren = React.Children.map(this.props.children,
+    (child, i) => {
+      if (!selectedChild || child.props.selected) {
+        selectedChild = child;
+      }
+      const onChildSelect =
       child.props.onSelect ||
-      onSelect && onSelect.bind(null, child.props.value, i);
-    return <ToolbarSelectOption {...child.props} onSelect={onChildSelect} />;
-  });
+        this.props.onSelect && this.props.onSelect.bind(null,
+          child.props.value,
+          i
+      );
+      return <ToolbarSelectOption {...child.props} onSelect={onChildSelect} />;
+    });
+    return (
+      <a
+        className="toolbar-select toolbar-button"
+        onClick={this.handleOpen.bind(this)}
+        onMouseDown={preventDefault}
+        ref={node => {this._node = node;}}
+        title={this.props.title}>
+        {selectedChild.props.label}
+        <svg width="13" height="10">
+          <path fill="#666" d="M 5 5 L 13 5 L 9 1 z" />
+          <path fill="#666" d="M 5 6 L 13 6 L 9 10 z" />
+        </svg>
+        <ul className={'toolbar-select-options' + (visible ? ' open' : '')}>
+          {optionChildren}
+        </ul>
+      </a>
+    );
+  }
 
-  return (
-    <a
-      className="toolbar-select toolbar-button"
-      onMouseDown={preventDefault}
-      title={title}>
-      {selectedChild.props.label}
-      <svg width="13" height="10">
-        <path fill="#666" d="M 5 5 L 13 5 L 9 1 z" />
-        <path fill="#666" d="M 5 6 L 13 6 L 9 10 z" />
-      </svg>
-      <ul className="toolbar-select-options">
-        {optionChildren}
-      </ul>
-    </a>
-  );
-}
+  _subscribe() {
+    if (!this._listener) {
+      this._listener = this.handleClick.bind(this);
+      document.addEventListener('click', this._listener);
+    }
+  }
 
-ToolbarSelect.propTypes = {
-  onSelect: PropTypes.func,
-  title: PropTypes.string,
-};
+  _release() {
+    if (this._listener) {
+      document.removeEventListener('click', this._listener);
+      this._listener = null;
+    }
+  }
+
+  handleClick(e) {
+    if (this._node !== e.target) {
+      preventDefault(e);
+      this.setState({ visible: false });
+      this._release();
+    }
+  }
+
+  handleOpen = e => {
+    preventDefault(e);
+    this.setState({ visible: true });
+    this._subscribe();
+  };
+
+}
 
 export function ToolbarSelectOption({ onSelect, label, selected }) {
   return (