diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
index cc268cd2f79..d7f6afeef25 100644
--- a/.changeset/five-pillows-fail.md
+++ b/.changeset/five-pillows-fail.md
@@ -3,7 +3,7 @@
 ---
 
 Add new components:
-- UI components (`Button`, `ButtonGroup`, `Dialog`, `Dropdown`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `ButtonGroup`, `Dialog`, `Menu`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton` and `ToolbarButton`)
 - Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
index a43f7677da5..a9f77a3efc8 100644
--- a/packages/graphiql-react/package.json
+++ b/packages/graphiql-react/package.json
@@ -40,6 +40,7 @@
     "@graphiql/toolkit": "^1.0.0-next.1",
     "@reach/combobox": "^0.17.0",
     "@reach/dialog": "^0.17.0",
+    "@reach/menu-button": "^0.17.0",
     "@reach/visually-hidden": "^0.17.0",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.0-next.1",
diff --git a/packages/graphiql-react/src/toolbar/execute.tsx b/packages/graphiql-react/src/toolbar/execute.tsx
index 56023651996..5d34d282e36 100644
--- a/packages/graphiql-react/src/toolbar/execute.tsx
+++ b/packages/graphiql-react/src/toolbar/execute.tsx
@@ -1,10 +1,7 @@
-import { OperationDefinitionNode } from 'graphql';
-import { useState } from 'react';
-
 import { useEditorContext } from '../editor';
 import { useExecutionContext } from '../execution';
 import { PlayIcon, StopIcon } from '../icons';
-import { Dropdown } from '../ui';
+import { Menu } from '../ui';
 
 import './execute.css';
 
@@ -17,101 +14,56 @@ export function ExecuteButton() {
     nonNull: true,
     caller: ExecuteButton,
   });
-  const [optionsOpen, setOptionsOpen] = useState(false);
-  const [highlight, setHighlight] = useState<OperationDefinitionNode | null>(
-    null,
-  );
 
   const operations = queryEditor?.operations || [];
   const hasOptions = operations.length > 1 && typeof operationName !== 'string';
 
-  return (
-    <div className="graphiql-execute-button-wrapper">
-      <button
-        type="button"
-        className="graphiql-execute-button"
-        onMouseDown={
-          // Allow mouse down if there is no running query, there are options
-          // for which operation to run, and the dropdown is currently closed.
-          !isFetching && hasOptions && !optionsOpen
-            ? downEvent => {
-                let initialPress = true;
-                const downTarget = downEvent.currentTarget;
-                setHighlight(null);
-                setOptionsOpen(true);
+  const buttonProps = {
+    type: 'button' as const,
+    className: 'graphiql-execute-button',
+    title: 'Execute Query (Ctrl-Enter)',
+    children: isFetching ? <StopIcon /> : <PlayIcon />,
+  };
 
-                type MouseUpEventHandler = (upEvent: MouseEvent) => void;
-                let onMouseUp: MouseUpEventHandler | null = upEvent => {
-                  if (initialPress && upEvent.target === downTarget) {
-                    initialPress = false;
-                  } else {
-                    document.removeEventListener('mouseup', onMouseUp!);
-                    onMouseUp = null;
-                    const isOptionsMenuClicked =
-                      upEvent.currentTarget &&
-                      downTarget.parentNode?.compareDocumentPosition(
-                        upEvent.currentTarget as Node,
-                      ) &&
-                      Node.DOCUMENT_POSITION_CONTAINED_BY;
-                    if (!isOptionsMenuClicked) {
-                      // menu calls setState if it was clicked
-                      setOptionsOpen(false);
-                    }
-                  }
-                };
-
-                document.addEventListener('mouseup', onMouseUp);
-              }
-            : undefined
-        }
-        onClick={
-          // Allow click event if there is a running query or if there are not
-          // options for which operation to run.
-          isFetching || !hasOptions
-            ? () => {
-                if (isFetching) {
-                  stop();
-                } else {
-                  run();
+  return hasOptions ? (
+    <Menu>
+      <Menu.Button {...buttonProps} />
+      <Menu.List>
+        {operations.map((operation, i) => {
+          const opName = operation.name
+            ? operation.name.value
+            : `<Unnamed ${operation.operation}>`;
+          return (
+            <Menu.Item
+              key={`${opName}-${i}`}
+              onSelect={() => {
+                const selectedOperationName = operation.name?.value;
+                if (
+                  queryEditor &&
+                  selectedOperationName &&
+                  selectedOperationName !== queryEditor.operationName
+                ) {
+                  setOperationName(selectedOperationName);
                 }
-              }
-            : undefined
+                run();
+              }}
+            >
+              {opName}
+            </Menu.Item>
+          );
+        })}
+      </Menu.List>
+    </Menu>
+  ) : (
+    <button
+      {...buttonProps}
+      onClick={() => {
+        if (isFetching) {
+          stop();
+        } else {
+          run();
         }
-        title="Execute Query (Ctrl-Enter)"
-      >
-        {isFetching ? <StopIcon /> : <PlayIcon />}
-      </button>
-      {hasOptions && optionsOpen ? (
-        <Dropdown>
-          {operations.map((operation, i) => {
-            const opName = operation.name
-              ? operation.name.value
-              : `<Unnamed ${operation.operation}>`;
-            return (
-              <Dropdown.Item
-                key={`${opName}-${i}`}
-                className={operation === highlight ? 'selected' : undefined}
-                onMouseOver={() => setHighlight(operation)}
-                onMouseOut={() => setHighlight(null)}
-                onMouseUp={() => {
-                  setOptionsOpen(false);
-                  const selectedOperationName = operation.name?.value;
-                  if (
-                    queryEditor &&
-                    selectedOperationName &&
-                    selectedOperationName !== queryEditor.operationName
-                  ) {
-                    setOperationName(selectedOperationName);
-                  }
-                  run();
-                }}
-              >
-                {opName}
-              </Dropdown.Item>
-            );
-          })}
-        </Dropdown>
-      ) : null}
-    </div>
+      }}
+    />
   );
 }
diff --git a/packages/graphiql-react/src/ui/dropdown.css b/packages/graphiql-react/src/ui/dropdown.css
deleted file mode 100644
index 400bb09bd79..00000000000
--- a/packages/graphiql-react/src/ui/dropdown.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.graphiql-dropdown {
-  background-color: var(--color-neutral-0);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius-8);
-  margin: 0;
-  max-width: 250px;
-  min-width: 100px;
-  padding: 0;
-  position: absolute;
-  z-index: 1;
-}
-
-.graphiql-dropdown-item {
-  border-radius: var(--border-radius-4);
-  cursor: pointer;
-  margin: var(--px-4);
-  overflow: hidden;
-  padding: var(--px-6) var(--px-8);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.graphiql-dropdown-item:active,
-.graphiql-dropdown-item:hover {
-  background-color: var(--color-neutral-7);
-}
-
-.graphiql-dropdown-item:not(:first-child) {
-  margin-top: 0;
-}
diff --git a/packages/graphiql-react/src/ui/dropdown.tsx b/packages/graphiql-react/src/ui/dropdown.tsx
deleted file mode 100644
index 043eb7a5d26..00000000000
--- a/packages/graphiql-react/src/ui/dropdown.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import './dropdown.css';
-
-export function Dropdown(props: JSX.IntrinsicElements['ul']) {
-  return (
-    <ul
-      {...props}
-      className={`graphiql-dropdown ${props.className || ''}`.trim()}
-    />
-  );
-}
-
-Dropdown.Item = DropdownItem;
-
-function DropdownItem(props: JSX.IntrinsicElements['li']) {
-  return (
-    <li
-      {...props}
-      className={`graphiql-dropdown-item ${props.className || ''}`.trim()}
-    />
-  );
-}
diff --git a/packages/graphiql-react/src/ui/index.ts b/packages/graphiql-react/src/ui/index.ts
index a79f28f1edc..9d2dae544fa 100644
--- a/packages/graphiql-react/src/ui/index.ts
+++ b/packages/graphiql-react/src/ui/index.ts
@@ -1,7 +1,7 @@
 export * from './button';
 export * from './button-group';
 export * from './dialog';
-export * from './dropdown';
+export * from './menu';
 export * from './markdown';
 export * from './spinner';
 export * from './tabs';
diff --git a/packages/graphiql-react/src/ui/menu.css b/packages/graphiql-react/src/ui/menu.css
new file mode 100644
index 00000000000..3344eaa4bcf
--- /dev/null
+++ b/packages/graphiql-react/src/ui/menu.css
@@ -0,0 +1,31 @@
+@import url('@reach/menu-button/styles.css');
+
+[data-reach-menu-list] {
+  background-color: var(--color-neutral-0);
+  box-shadow: var(--box-shadow);
+  border: none;
+  border-radius: var(--border-radius-8);
+  font-size: inherit;
+  max-width: 250px;
+  padding: var(--px-4);
+}
+
+[data-reach-menu-item] {
+  border-radius: var(--border-radius-4);
+  font-size: inherit;
+  margin: var(--px-4);
+  overflow: hidden;
+  padding: var(--px-6) var(--px-8);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &[data-selected],
+  &:hover {
+    background-color: var(--color-neutral-7);
+    color: inherit;
+  }
+
+  &:not(:first-child) {
+    margin-top: 0;
+  }
+}
diff --git a/packages/graphiql-react/src/ui/menu.tsx b/packages/graphiql-react/src/ui/menu.tsx
new file mode 100644
index 00000000000..0bd40942ca0
--- /dev/null
+++ b/packages/graphiql-react/src/ui/menu.tsx
@@ -0,0 +1,15 @@
+import {
+  Menu as MenuRoot,
+  MenuButton,
+  MenuItem,
+  MenuList,
+} from '@reach/menu-button';
+import { createComponentGroup } from '../utility/component-group';
+
+import './menu.css';
+
+export const Menu = createComponentGroup(MenuRoot, {
+  Button: MenuButton,
+  Item: MenuItem,
+  List: MenuList,
+});
diff --git a/packages/graphiql-react/src/utility/component-group.ts b/packages/graphiql-react/src/utility/component-group.ts
new file mode 100644
index 00000000000..d8cae861a00
--- /dev/null
+++ b/packages/graphiql-react/src/utility/component-group.ts
@@ -0,0 +1,13 @@
+import { JSXElementConstructor } from 'react';
+
+export const createComponentGroup = <
+  Root extends JSXElementConstructor<any>,
+  Children extends { [key: string]: JSXElementConstructor<any> },
+>(
+  root: Root,
+  children: Children,
+): Root & Children =>
+  Object.entries(children).reduce<any>((r, [key, value]) => {
+    r[key] = value;
+    return r;
+  }, root);
diff --git a/yarn.lock b/yarn.lock
index 40e5490d9b3..6241ef166d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4469,6 +4469,29 @@
     react-remove-scroll "^2.4.3"
     tslib "^2.3.0"
 
+"@reach/dropdown@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/dropdown/-/dropdown-0.17.0.tgz#8140bb2e6a045f91e07c6d5a6ff960958df2ef33"
+  integrity sha512-qBTIGInhxtPHtdj4Pl2XZgZMz3e37liydh0xR3qc48syu7g71sL4nqyKjOzThykyfhA3Pb3/wFgsFJKGTSdaig==
+  dependencies:
+    "@reach/auto-id" "0.17.0"
+    "@reach/descendants" "0.17.0"
+    "@reach/popover" "0.17.0"
+    "@reach/utils" "0.17.0"
+    tslib "^2.3.0"
+
+"@reach/menu-button@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.17.0.tgz#9f40979129b61f8bdc19590c527f7ed4883d2dce"
+  integrity sha512-YyuYVyMZKamPtivoEI6D0UEILYH3qZtg4kJzEAuzPmoR/aHN66NZO75Fx0gtjG1S6fZfbiARaCOZJC0VEiDOtQ==
+  dependencies:
+    "@reach/dropdown" "0.17.0"
+    "@reach/popover" "0.17.0"
+    "@reach/utils" "0.17.0"
+    prop-types "^15.7.2"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@reach/observe-rect@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"