diff --git a/elements/rh-menu/demo/color-context.html b/elements/rh-menu/demo/color-context.html
new file mode 100644
index 0000000000..4ad61d55e1
--- /dev/null
+++ b/elements/rh-menu/demo/color-context.html
@@ -0,0 +1,19 @@
+<rh-context-picker target="context"></rh-context-picker>
+
+<rh-context-provider id="context" color-palette="darkest">
+  <rh-menu>
+    <rh-button slot="button">Toggle Links</rh-button>
+    <a href="#">Link1</a>
+    <a href="#">Link2</a>
+    <a href="#">Link3</a>
+    <a href="#">Link4</a>
+  </rh-menu>
+</rh-context-provider>
+
+<script type="module">
+  import '@rhds/elements/rh-menu/rh-menu.js';
+  import '@rhds/elements/rh-context-provider/rh-context-provider.js';
+  import '@rhds/elements/rh-context-picker/rh-context-picker.js';
+  import '@rhds/elements/rh-button/rh-button.js';
+</script>
+
diff --git a/elements/rh-menu/demo/demo.css b/elements/rh-menu/demo/demo.css
deleted file mode 100644
index c3ec25926d..0000000000
--- a/elements/rh-menu/demo/demo.css
+++ /dev/null
@@ -1,11 +0,0 @@
-rh-context-provider {
-  padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
-}
-
-a {
-  padding: 5px;
-}
-
-[color-palette="darkest"] a {
-  color: white;
-}
diff --git a/elements/rh-menu/demo/position-left.html b/elements/rh-menu/demo/position-left.html
new file mode 100644
index 0000000000..79faa7712e
--- /dev/null
+++ b/elements/rh-menu/demo/position-left.html
@@ -0,0 +1,15 @@
+
+<rh-menu position="left" persistent>
+  <rh-button slot="button">Toggle Settings</rh-button>
+  <rh-button variant="link">Menuitem1</rh-button>
+  <rh-button variant="link">Menuitem2</rh-button>
+  <rh-button variant="link">Menuitem3</rh-button>
+  <rh-button variant="link">Menuitem4</rh-button>
+</rh-menu>
+
+<script type="module">
+  import '@rhds/elements/rh-menu/rh-menu.js';
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+</script>
+
diff --git a/elements/rh-menu/demo/position-right.html b/elements/rh-menu/demo/position-right.html
new file mode 100644
index 0000000000..2a19b66cd2
--- /dev/null
+++ b/elements/rh-menu/demo/position-right.html
@@ -0,0 +1,13 @@
+<rh-menu position="right">
+  <rh-button slot="button">Toggle Links</rh-button>
+  <a href="#">Link1</a>
+  <a href="#">Link2</a>
+  <a href="#">Link3</a>
+  <a href="#">Link4</a>
+</rh-menu>
+
+<script type="module">
+  import '@rhds/elements/rh-menu/rh-menu.js';
+  import '@rhds/elements/rh-button/rh-button.js';
+</script>
+
diff --git a/elements/rh-menu/demo/position-top.html b/elements/rh-menu/demo/position-top.html
new file mode 100644
index 0000000000..4890d9d12a
--- /dev/null
+++ b/elements/rh-menu/demo/position-top.html
@@ -0,0 +1,15 @@
+<rh-menu position="top">
+  <rh-button slot="button">Toggle Menu</rh-button>
+  <rh-button variant="link">Menuitem1</rh-button>
+  <rh-button variant="link">Menuitem2</rh-button>
+  <rh-button variant="link">Menuitem3</rh-button>
+  <rh-button variant="link">Menuitem4</rh-button>
+</rh-menu>
+
+<script type="module">
+  import 'element-internals-polyfill';
+  import '@rhds/elements/rh-menu/rh-menu.js';
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
+</script>
+
diff --git a/elements/rh-menu/demo/positioning.html b/elements/rh-menu/demo/positioning.html
deleted file mode 100644
index 43bd13fb9f..0000000000
--- a/elements/rh-menu/demo/positioning.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<rh-context-provider color-palette="lightest">
-  <h3>Default, positioned bottom</h3>
-  <p>
-    <rh-menu id="rh-buttons">
-      <rh-button slot="button">Toggle Menu</rh-button>
-      <rh-button data-item="1" variant="link">Menuitem1</rh-button>
-      <rh-button data-item="2" variant="link">Menuitem2</rh-button>
-      <rh-button data-item="3" variant="link">Menuitem3</rh-button>
-      <rh-button data-item="4" variant="link">Menuitem4</rh-button>
-    </rh-menu>
-  </p>
-  <h3>Positioned right or left</h3>
-  <p>
-  <rh-menu position="right">
-    <rh-button slot="button">Toggle Links</rh-button>
-    <a href="#">Link1</a>
-    <a href="#">Link2</a>
-    <a href="#">Link3</a>
-    <a href="#">Link4</a>
-  </rh-menu>
-  <rh-menu position="left" persistent>
-    <rh-button slot="button">Toggle Settings</rh-button>
-    <rh-button variant="link">Menuitem1</rh-button>
-    <rh-button variant="link">Menuitem2</rh-button>
-    <rh-button variant="link">Menuitem3</rh-button>
-    <rh-button variant="link">Menuitem4</rh-button>
-  </rh-menu>
-  </p>
-  <h3>Positioned top
-    <p>
-    <rh-menu position="right">
-      <rh-button slot="button">Toggle Links</rh-button>
-      <a href="#">Link1</a>
-      <a href="#">Link2</a>
-      <a href="#">Link3</a>
-      <a href="#">Link4</a>
-    </rh-menu>
-    <rh-menu position="left" persistent>
-      <rh-button slot="button">Settings</rh-button>
-      <rh-button variant="link">Menuitem1</rh-button>
-      <rh-button variant="link">Menuitem2</rh-button>
-      <rh-button variant="link">Menuitem3</rh-button>
-      <rh-button variant="link">Menuitem4</rh-button>
-    </rh-menu>
-    </p></h3>
-  <p>
-    <rh-menu position="top">
-      <rh-button slot="button">Toggle Menu</rh-button>
-      <rh-button variant="link">Menuitem1</rh-button>
-      <rh-button variant="link">Menuitem2</rh-button>
-      <rh-button variant="link">Menuitem3</rh-button>
-      <rh-button variant="link">Menuitem4</rh-button>
-    </rh-menu>
-  </p>
-</rh-context-provider>
-<rh-context-provider color-palette="darkest">
-  <h3>Default, positioned bottom</h3>
-  <p>
-    <rh-menu>
-      <rh-button slot="button">Toggle Menu</rh-button>
-      <rh-button variant="link">Menuitem1</rh-button>
-      <rh-button variant="link">Menuitem2</rh-button>
-      <rh-button variant="link">Menuitem3</rh-button>
-      <rh-button variant="link">Menuitem4</rh-button>
-    </rh-menu>
-  </p>
-  <h3>Positioned right or left</h3>
-  <p>
-  <rh-menu position="right">
-    <rh-button slot="button">Toggle Links</rh-button>
-    <a href="#">Link1</a>
-    <a href="#">Link2</a>
-    <a href="#">Link3</a>
-    <a href="#">Link4</a>
-  </rh-menu>
-  <rh-menu position="left" persistent>
-    <rh-button slot="button">Toggle Settings</rh-button>
-    <rh-button variant="link">Menuitem1</rh-button>
-    <rh-button variant="link">Menuitem2</rh-button>
-    <rh-button variant="link">Menuitem3</rh-button>
-    <rh-button variant="link">Menuitem4</rh-button>
-  </rh-menu>
-  </p>
-  <h3>Positioned top</h3>
-  <p>
-    <rh-menu position="top">
-      <rh-button slot="button">Toggle Menu</rh-button>
-      <rh-button variant="link">Menuitem1</rh-button>
-      <rh-button variant="link">Menuitem2</rh-button>
-      <rh-button variant="link">Menuitem3</rh-button>
-      <rh-button variant="link">Menuitem4</rh-button>
-    </rh-menu>
-  </p>
-</rh-context-provider>
-
-<link rel="stylesheet" href="demo.css">
-<script type="module">
-import 'element-internals-polyfill';
-import '@rhds/elements/rh-menu/rh-menu.js';
-import '@rhds/elements/rh-context-provider/rh-context-provider.js';
-import '@rhds/elements/rh-button/rh-button.js';
-import '@rhds/elements/rh-tooltip/rh-tooltip.js';
-</script>
-
diff --git a/elements/rh-menu/demo/rh-menu.html b/elements/rh-menu/demo/rh-menu.html
index a50e70aa9d..57439f7bb0 100644
--- a/elements/rh-menu/demo/rh-menu.html
+++ b/elements/rh-menu/demo/rh-menu.html
@@ -7,7 +7,6 @@
 </rh-menu>
 
 <script type="module">
-  import 'element-internals-polyfill';
   import '@rhds/elements/rh-menu/rh-menu.js';
   import '@rhds/elements/rh-button/rh-button.js';
 </script>
diff --git a/elements/rh-menu/demo/rh-menu.js b/elements/rh-menu/demo/rh-menu.js
deleted file mode 100644
index 6c7f801474..0000000000
--- a/elements/rh-menu/demo/rh-menu.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import 'element-internals-polyfill';
-import '@rhds/elements/rh-menu/rh-menu.js';
-import '@rhds/elements/rh-context-provider/rh-context-provider.js';
-import '@rhds/elements/rh-button/rh-button.js';
-import '@rhds/elements/rh-tooltip/rh-tooltip.js';