diff --git a/src/menu/new/BytmMenu.ts b/src/menu/new/BytmMenu.tsx
similarity index 84%
rename from src/menu/new/BytmMenu.ts
rename to src/menu/new/BytmMenu.tsx
index bb6a64ce60..c0636f0de8 100644
--- a/src/menu/new/BytmMenu.ts
+++ b/src/menu/new/BytmMenu.tsx
@@ -1,15 +1,16 @@
+import * as ReactDOM from "react-dom";
+import * as React from "react";
 import { clearInner, NanoEmitter, warn } from "../../utils";
-import menuTemplateHtml from "./menuTemplate.html";
 
 export interface BytmMenuConfig {
   /** ID that gets added to all child element IDs and class names */
   id: string;
   /** Called to render the body of the menu */
-  renderBody: (bodyContainer: HTMLElement) => HTMLElement;
+  renderBody: () => React.ReactNode;
   /** Called to render the header of the menu - leave undefined for a blank header */
-  renderHeader?: (headerContainer: HTMLElement) => HTMLElement;
+  renderHeader?: () => React.ReactNode;
   /** Called to render the footer of the menu - leave undefined for no footer */
-  renderFooter?: (footerContainer: HTMLElement) => HTMLElement;
+  renderFooter?: () => React.ReactNode;
 }
 
 interface BytmMenuEventsMap {
@@ -23,7 +24,6 @@ interface BytmMenuEventsMap {
   clear: () => void;
 }
 
-// TODO: expose on interface
 /** Creates and manages a modal menu element */
 export class BytmMenu extends NanoEmitter<BytmMenuEventsMap> {
   public readonly config;
@@ -43,12 +43,13 @@ export class BytmMenu extends NanoEmitter<BytmMenuEventsMap> {
     const bgElem = document.createElement("div");
     bgElem.id = `bytm-${this.id}-menu-bg`;
     bgElem.classList.add("bytm-menu-bg");
-    bgElem.innerHTML = menuTemplateHtml;
     bgElem.style.visibility = "hidden";
     bgElem.style.display = "none";
 
     document.body.appendChild(bgElem);
 
+    ReactDOM.render(<MenuContent></MenuContent>, bgElem);
+
     this.events.emit("render");
   }
 
@@ -110,3 +111,14 @@ export class BytmMenu extends NanoEmitter<BytmMenuEventsMap> {
     this.events.emit("close");
   }
 }
+
+function MenuContent() {
+  // TODO:
+  return (
+    <div className="bytm-menu-content">
+      <div className="bytm-menu-header" id="bytm-menu-header"></div>
+      <div className="bytm-menu-body" id="bytm-menu-body"></div>
+      <div className="bytm-menu-footer" id="bytm-menu-footer"></div>
+    </div>
+  );
+}
diff --git a/src/menu/new/menuTemplate.html b/src/menu/new/menuTemplate.html
deleted file mode 100644
index abff90563d..0000000000
--- a/src/menu/new/menuTemplate.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="bytm-menu" title="">
-  <div class="bytm-menu-header">
-    <div class="bytm-menu-title-wrapper" role="heading" aria-level="1">
-
-    </div>
-    <img class="bytm-menu-close" />
-  </div>
-  <div>
-
-  </div>
-  <div>
-
-  </div>
-</div>
\ No newline at end of file